CSS 图像旋转变换 [英] CSS Image Rotation Transformation

问题描述

我有这个 jsfiddle，我认为它会使这个图像不断旋转，但它没有

I have this jsfiddle, and I thought that it would make this image constantly rotate, but it doesn't.

使用的 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);
} 

为什么图像不不断旋转?

Why isn't the image constantly rotating?

推荐答案

您需要使用动画，因为它没有开始和结束的过渡:

You'll need to use an animation because it doesn't have a start and an end to transition from:

.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 图像旋转变换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！