css - 如何使用css3围绕自身旋转div？

Question

我正在尝试为我网站内的所有 div 实现轮换。我需要在鼠标悬停时使用此功能。

Answer 1

您可以使用 animation

div {
    width: 100px;
    height: 100px;
    background-color: #ddd;
    margin-bottom: 10px;
    transition: all 1s ease;
}

div:hover {
  
  animation: rotate 1s forwards alternate linear
}

@keyframes rotate {
  0% {
    transform: rotate(0deg)
  }
  
  100% {
    transform: rotate(360deg)
  }
  
}

<div></div>