Вращение по центру оси

Question

Почему при вращении кругов их начинает бросать влево и в право помогите понять в чем дело.

let sound = document.getElementById('sound');
let img = document.getElementById('rotateImg');
let img2 = document.getElementById('rotateImg2');
 
function rotate(action) {
    img.style.animationPlayState = action;
    img2.style.animationPlayState = action;
    
    if (action =='running') { 
        sound.play()
    } else { 
        sound.stop() 
    }
}

body
 {
 font-family: "Vibur", cursive;
  font-size: 5px;
  background-image: url("https://www.dropbox.com/s/2ct0i6kc61vp0bh/wall.jpg?raw=1");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #141414;
  background-attachment: fixed; 
}
#rotateImg {
  animation: 1s myRotate infinite linear paused;
}
#rotateImg2 {
  animation: 1s myRotate infinite linear paused reverse;
} 
 
@keyframes myRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.sign {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  .sign__word{
    position: absolute;
    font-size: 100px;
    left:50%;
    top:50%;
    text-align: center;
    line-height: 1;
    color: #c6e2ff;
    animation: neon .08s ease-in-out infinite alternate;
    
  }
.sign__word2{
    position: absolute;
    font-size: 60px;
    left:695px;
    top:124px;
    text-align: center;
    line-height: 1;
    color: #c6e2ff;
    animation: neon .08s ease-in-out infinite alternate;
    
  }
@keyframes neon {
  from {
    text-shadow: 0 0 6px rgba(202, 228, 225, 0.92), 0 0 30px rgba(202, 228, 225, 0.34), 0 0 12px rgba(30, 132, 242, 0.52), 0 0 21px rgba(30, 132, 242, 0.92), 0 0 34px rgba(30, 132, 242, 0.78), 0 0 54px rgba(30, 132, 242, 0.92); }
  to {
    text-shadow: 0 0 6px rgba(202, 228, 225, 0.98), 0 0 30px rgba(202, 228, 225, 0.42), 0 0 12px rgba(30, 132, 242, 0.58), 0 0 22px rgba(30, 132, 242, 0.84), 0 0 38px rgba(30, 132, 242, 0.88), 0 0 60px #1e84f2; } }

<div class="sign">
 <span class="sign__word" id="rotateImg">&#11096;
</span>
  <span class="sign__word2" id="rotateImg2">&#11096;
</span>
 </div>
<audio id="sound" src="http://www.html5tutorial.info/media/vincent.ogg"></audio>
<button onclick="rotate('running');">Крутить пластинку</button>
<button onclick="rotate('paused');">Остановить</button>

Answer 1

Если присмотреться к символу, то можно увидеть, что он не совсем по центру стоит, при вращении проверяйте ширину и высоту элемента, они должны быть равны и чётными.

body{
  background: #222;
}
.sign__word{
  position: absolute;
  top: 50%;
  left: 50%;

  display: block;

  width: 60px;
  height: 60px;
  
  border: 6px solid #c6e2ff;
  border-radius: 200px;
  
  transform-origin: 50% 50%;
  
  -webkit-animation: anim 2s linear infinite;
  -o-animation: anim 2s linear infinite;
  animation: anim 2s linear infinite;
}

.sign__word_2{
  width: 80px;
  top: 40px;
}


@keyframes anim {
  0%{
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  
  100%{
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

<div class="sign">
 <span class="sign__word" id="rotateImg"></span>
 
  <span class="sign__word sign__word_2" id="rotateImg"></span>
</div>

БЛОГ НА HUSL

Вращение по центру оси

Ответы (1 шт):