如何使用 css3 旋转和 setinterval 旋转图像? [英] How to rotate an image using css3 rotate and setinterval?

问题描述

我想使用 css3 旋转和 javascript setinterval 旋转图像.图像应在鼠标悬停时旋转.有人知道怎么做吗?

I want to rotate an image using css3 rotate and javascript setinterval. The image should rotate on mouseover. Anyone know how to ?

推荐答案

你甚至不需要 JavaScript 就可以做到；只需在元素上为 transform 放置一个过渡，并在悬停时应用旋转.例如:

You don't even need JavaScript to do it; just put a transition for transform on the element, and apply the rotation on hover. For example:

div {
    background-color: red;
    height: 100px;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
       -moz-transition:    -moz-transform 0.5s ease-in-out;
         -o-transition:      -o-transform 0.5s ease-in-out;
            transition:         transform 0.5s ease-in-out;
    width: 100px;
}

div:hover {
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg);
}​

这是一个演示.

这篇关于如何使用 css3 旋转和 setinterval 旋转图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！