如何使用 -webkit 和 jQuery 将图像旋转 -360 度和 +360 度

Question

我找到了一个无限旋转div 的例子 - 如何通过点击触发css3旋转效果？ 这是在 jsFiddle 上 http://jsfiddle.net/yNT3L/这是 jsFiddle 上使用的代码 -

//.css

    width: 100px;
    height: 100px;
    background-color: red;
    margin: 50px 50px 50px 50px;
}
#d2{
    background-color: green;
    -webkit-animation: spin 10s infinite linear;
}
.spinEffect{
    -webkit-animation: spin 0.5s 1 linear;
}
@-webkit-keyframes spin {
0%  {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}   
}

/

/jQuery

$(function(){
    $("a").click(function(){
        $("#d1").addClass(".spinEffect");
    });
});

它似乎针对 -webkit 的旋转元素，我只是想知道如何将旋转元素的值设置为 360 度，将另一个div 设置为 -360 度？

Answer 1

spin是

关键帧规范的自定义名称，它没有内置在webkit中。您需要做的就是创建一个具有不同名称的新关键帧项目，并引用该项目。

#d3{
    background-color: blue;
    -webkit-animation: spinreverse 10s infinite linear;
}
@-webkit-keyframes spinreverse {
    0%  {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(-360deg);}   
}

我更新了你的jsfiddle http://jsfiddle.net/yNT3L/157/

Answer 2

你不需要jquery。此外，spin不是webkit的内置函数或方法。

演示：http://jsfiddle.net/lotusgodkk/yNT3L/156/

.CSS：

#d1 {
    background-color: green;
    -webkit-animation: antispin 10s infinite linear;
}
@-webkit-keyframes antispin {
0% {
    -webkit-transform: rotate(360deg);
}
100% {
    -webkit-transform: rotate(0deg);
}
}

您可以在此处学习有关动画的更多信息：http://css-tricks.com/snippets/css/keyframe-animation-syntax/。