我有这个jsfiddle ,并且我认为它会使该图像不断旋转,但事实并非如此。
使用的 HTML:
<img class="rotate" src="http://www.arcelormittal.com/distributionsolutions/content/images/reload_captcha.png" />
使用的 CSS:
.rotate{
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
为什么图像不不断旋转?
最佳答案
您需要使用动画,因为它没有开始和结束过渡:
.rotate {
-webkit-animation: spin .8s infinite linear;
animation: spin .8s infinite linear;
}
@-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spin {
100% { -moz-transform: rotate(360deg); }
}
@keyframes spin {
100% {
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
}
关于CSS 图像旋转变换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17619217/