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

但是图像根本就没有移动。我已经检查了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); 
}