CSS3图像旋转：图像根本不旋转

Question

我在 div 中有一张图片，其 CSS 如下：

#container {
  margin: auto;
  width: 500px;
}

#container img:hover{
  -webkit-transform: rotate(360deg); 
  -moz-transform: rotate(360deg); 
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg); 
}

但图像根本不动。我已经在 Chrome 控制台中进行了检查，没有出现 CSS 错误。

有人知道我做错了什么吗？

Answer 1

当您旋转 360 度时，什么也没有发生（因为 360 度是一个完整的圆）。您可能想要实现的是为这个旋转设置动画，使其可见。为此，您需要在 css 中设置转换：

#container {
  margin: auto;
  width: 500px;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

#container img:hover{
  -webkit-transform: rotate(360deg); 
  -moz-transform: rotate(360deg); 
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg); 
}