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

Question

我在具有以下 CSS 的 div 中有一个图像：

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

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

但图像根本不动。我已经检查了 Chromes 控制台并且没有 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); 
}