用css连续翻转元素而不采取行动

Question

我想在没有动作的情况下使用css (y 按钮,悬停)在y轴上从0到360度连续翻转元素.

有些脚本通过添加一个类来允许它一次,例如:animate.css

其他只需按下按钮(http://desandro.github.io/3dtransforms/docs/card-flip.html)或悬停(http://davidwalsh.name/demo/css-flip.php)

.img:hover {
   transform: rotateY(360deg);
   transition: transform 10s;
}

那是我到目前为止所尝试的,但它只能工作一次而且仅在悬停时......

你能帮我拿到代码吗？

Answer 1

使用无限的CSS动画.

img {
    -webkit-animation: anim 10s infinite linear;
    animation: anim 10s infinite linear;
}

@-webkit-keyframes anim {
    from {-webkit-transform: rotateY(0deg);}
    to {-webkit-transform: rotateY(360deg);}
}

@keyframes anim {
    from {transform: rotateY(0deg);}
    to {transform: rotateY(360deg);}
}