在jquery (或javascript)中旋转，在页面上输入

Question

我在堆栈溢出上找到了一些代码来扩展jquery，并在单击元素时执行旋转操作，但是我想不出如何使用简单的document.ready来工作(像动画一样).下面是我到目前为止所发现的(这是“点击”jquery插件)：

<div class="rotate">
    <h1>Rotatey text</h1>
</div> 

<script type="text/javascript">

    var rotation = 0;

    jQuery.fn.rotate = function(degrees) {
        $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
                     '-moz-transform' : 'rotate('+ degrees +'deg)',
                     '-ms-transform' : 'rotate('+ degrees +'deg)',
                     'transform' : 'rotate('+ degrees +'deg)'});
    };

    $('.rotate').click(function() {
        rotation += 5;
        $(this).rotate(rotation);
    });

</script>

因此，我修改了其中的一些内容，让它在页面上旋转，进入我自己的代码(这是工作的，但不是以“动画的方式-它只是看起来已经旋转)：

<style>
#pic1 {
    background: url(chpt3_pg1_WelcomeR10b.png) no-repeat top center; 
    width: 100%;
    height: 100%;
    margin-top:0px;
    margin-left:1px;
    float: left;
    position: relative;
    z-index: 2;

/* Rotate div */
-ms-transform:rotate(0deg); /* IE 9 */
-webkit-transform:rotate(0deg); /* Chrome, Safari, Opera */
transform:rotate(0deg); /* Standard syntax */

}
</style>

  <div id="pic1"> </div>

<script type="text/javascript">
var rotation = 60;
jQuery.fn.rotate = function(degrees) {
    $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
                 '-moz-transform' : 'rotate('+ degrees +'deg)',
                 '-ms-transform' : 'rotate('+ degrees +'deg)',
                 'transform' : 'rotate('+ degrees +'deg)'});
};


$('#pic1').rotate(rotation);
</script>

上面的图片旋转了60度，但是，就像我说的，不是在动画中，所以我试着把它放在css参数内的动画方法中，它不工作.我不知道我是不是遗漏了什么，或者它是不是不能在动画函数中的css中完成：

<style>
    #pic1 {
        background: url(chpt3_pg1_WelcomeR10b.png) no-repeat top center; 
        width: 100%;
        height: 100%;
        margin-top:0px;
        margin-left:1px;
        float: left;
        position: relative;
        z-index: 2;

    /* Rotate div */
    -ms-transform:rotate(0deg); /* IE 9 */
    -webkit-transform:rotate(0deg); /* Chrome, Safari, Opera */
    transform:rotate(0deg); /* Standard syntax */

    }
</style>

<div id="pic1"> </div>

<script type="text/javascript">

$('#pic1').animate({

           '-webkit-transform' : 'rotate('+ 60 +'deg)',
                 '-moz-transform' : 'rotate('+ 60 +'deg)',
                 '-ms-transform' : 'rotate('+ 60 +'deg)',
                 'transform' : 'rotate('+ 60 +'deg)'


    }, 1500);

</script>

Answer 1

Jquery动画不适合旋转，至少在这种情况下是这样的。

在jquery时代之前，我们是如何在Javascript上做动画的：

var rotation = 0;
var targetRotation = 60;


jQuery.fn.rotate = function(degrees) {
    $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
                 '-moz-transform' : 'rotate('+ degrees +'deg)',
                 '-ms-transform' : 'rotate('+ degrees +'deg)',
                 'transform' : 'rotate('+ degrees +'deg)'});
};

function Timer() {
    if (rotation < targetRotation) {
        rotation++;
        $('#pic1').rotate(rotation);
        setTimeout(Timer, 100); //Set in milliseconds
    }
}
Timer();

在这个小提琴上试一试：http://jsfiddle.net/4JpEe/

Answer 2

CSS3转换用于处理转换动画：transitions.asp

我将设置一个单独的类，其中包含60 set旋转，并且只将该类应用于页面加载时的.rotate元素。将您的CSS转换时间设置为1.5s，您应该得到正确的结果。