transform: rotate(8turn)のサンプル

★

★を8回転

<p><span class="star">★</span></p>
<p><button id="btn">★を8回転</button></p>

.star {
  display: inline-block;
  font-size: 100px;
}

.star-anime {
  animation: star-rotate 4s;
}

@keyframes star-rotate {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(8turn);
  }
}

const btn = document.getElementById('btn')
const star = document.querySelector('.star')
btn.addEventListener('click', () => {
  star.classList.add('star-anime')
})

star.addEventListener('animationend', () => {
  star.classList.remove('star-anime')
})

元記事を表示する