Can someone take a look at my code, I am having issues where my Star and 5 points are not rotating from the center

Question

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;
  }

Dusan Zivanovic · Answer

Try 40% 40% in tranform origin. Worked for me.
.badge * {
  transform-origin:40% 40%;
}

Daniel Guy · Answer

or try:
.badge * {
  transform-origin: 180px 180px;
}

Bienvenido a la Comunidad de Treehouse

¿Buscas aprender algo nuevo?

Kaushik Sanyal

Kaushik Sanyal

¿Alguien puede revisar mi código? Tengo problemas donde mi Estrella y 5 puntos no rotan desde el centro

2 Respuestas

Dusan Zivanovic

Dusan Zivanovic

Daniel Guy

Daniel Guy