Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialKaushik Sanyal
6,378 PointsCan someone take a look at my code, I am having issues where my Star and 5 points are not rotating from the center
CSS
/* -------------------------- Base --------------------------- */
body { background: #8069a1; padding-top: 60px; }
svg { margin: auto; display: block; }
/* -------------------------- Keyframes --------------------------- */
@keyframes grow { 0% { transform: scale(0); } 30% { transform: scale(1.1); } 60% { transform: scale(0.9); } }
@keyframes turn { 0% { transform: rotate(0) scale(0); opacity: 0; } 60% { transform: rotate(375deg) scale(1.1);
} 80% { transform: rotate(355deg) scale(0.9); } 100% { transform: rotate(360deg) scale(1); }
}
@keyframes pulse { 50% { transform: scale(1.4); } }
/* -------------------------- SVG Styles --------------------------- */
.badge * { transform-origin: 50% 50%; }
.outer, .inner, .inline { animation: grow 1s ease-out backwards; }
.inner { animation-delay: .1s; }
.inline { animation-delay: .15s; }
.star { animation: turn 1.1s .2s ease-out backwards; }
.star circle { animation: pulse .7s 1.5s; }
.star circle:nth-of-type(2) { animation-delay: 1.6s; }
.star circle:nth-of-type(3) { animation-delay: 1.7s; }
.star circle:nth-of-type(4) { animation-delay: 1.8s; }
.star circle:nth-of-type(5) { animation-delay: 1.9s; }
2 Answers
Dusan Zivanovic
1,274 PointsTry 40% 40% in tranform origin. Worked for me. .badge * { transform-origin:40% 40%; }
Daniel Guy
15,305 Pointsor try: .badge * { transform-origin: 180px 180px; }