css 회전

-html

<div class="container">
  <div class="item front">★</div>
</div>

• css

body {
  padding: 50px;
}

.container {
  width: 100px;
  height: 100px;
  perspective: 300px;
}

.container .item {
 
  height: 100px;
  box-sizing: border-box;
  font-size: 60px;
  border: 1px solid red;
  backface-visibility: visible; /* 변경된 부분: hidden에서 visible로 */
 
  animation: rotate 3s linear infinite;
}

.container .item.front {
  position: absolute;
  transform: rotateY(0deg);
  transform-origin: center center;
}

.container:hover .item.front {
  transform: rotateY(360deg);
}



@keyframes rotate {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}