Question

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

Answer 1

您可以使用animation

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

Answer 2

如果您希望通过转换进行转换，则需要向主类添加以下内容：

transition:all 0.3s;

注意：0.3s表示时间，您可以将其更改为任何数字，例如0.7s

然后您将以下内容添加到:hover事件

-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);

注意：deg表示您希望它们旋转多少度，因此您可以添加90deg之类的任何数字，而不是360deg

Answer 3

我已经为你创建了一个jsfiddle，所以你可以了解旋转的工作原理。

＆＃13;

div{
height:100px;
width:100px;
background-color:#000;
margin:50px;
 transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
 -moz-transition: all 1s ease-in-out;
 -o-transition: all 1s ease-in-out;
}

div:hover{
    transform:rotate(45deg);
     -webkit-transform:rotate(45deg);
      -moz-transform:rotate(45deg); 
      -0-transform:rotate(45deg);
 }

＆＃13;

<div>
</div>

＆＃13;

如何使用css3旋转div本身？

3 个答案: