Question

我找到了一个无限旋转div的例子 - How to trigger css3 rotate effect by clicking?，这里是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的spin元素而我只是想知道如何将spin元素的值设置为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/。

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

2 个答案: