0

我有代码...

    $(document).ready(function(){

    $("#box").animate({ 
       top: "250px",
       left: "500px",
       width: '300px',
       height: '250px',
     }, 2000 );

});

...移动和更改我的 div 的大小。

我在互联网上环顾四周，发现了一个允许使用 jQuery 旋转 div 的函数。不幸的是，jQuery 使用 CSS 来执行此操作，这意味着它不允许 div 在更改大小和位置时旋转。

我所希望的是 div 会同时旋转、增大大小和改变位置。我不确定这是否可行，但如果可以，您能否向我解释一下它是如何完成的。

我唯一能想到的是我使用 CSS 而不是 jQuery 来制作所有 3 个动画。这怎么可能，或者做我想做的最简单的方法是什么。非常感谢 ！！

这是我的 CSS 代码：

    #box{

        -moz-border-radius:15px;
        border-radius:15px;
        width:1px;
        height:1px;
        background:#D8D8D8;
        border:2px solid black;
        position: relative;
        margin-left:100px;
        margin-top:150px;


    }
4

2 回答 2

3

这很混乱，但加入一些 CSS 动画就可以了。

http://jsfiddle.net/Pd426/1/

新的 CSS：

#box{

        -moz-border-radius:15px;
        border-radius:15px;
        width:1px;
        height:1px;
        background:#D8D8D8;
        border:2px solid black;
        position: relative;
        margin-left:100px;
        margin-top:150px;


    transform:rotate(0deg);
-ms-transform:rotate(0deg); /* IE 9 */
-webkit-transform:rotate(0deg); /* Safari and Chrome */


    animation: rotate 2s;
-webkit-animation: rotate 2s; /* Safari and Chrome */

    }

@keyframes rotate
{
from {    transform:rotate(0deg);
-ms-transform:rotate(0deg); /* IE 9 */
-webkit-transform:rotate(0deg); /* Safari and Chrome */}
to {    transform:rotate(360deg);
-ms-transform:rotate(360deg); /* IE 9 */
-webkit-transform:rotate(360deg); /* Safari and Chrome */}
}

@-webkit-keyframes rotate /* Safari and Chrome */
{
from {    transform:rotate(0deg);
-ms-transform:rotate(0deg); /* IE 9 */
-webkit-transform:rotate(0deg); /* Safari and Chrome */}
to {    transform:rotate(360deg);
-ms-transform:rotate(360deg); /* IE 9 */
-webkit-transform:rotate(360deg); /* Safari and Chrome */}
}
于 2013-08-16T14:01:45.250 回答
0

我认为你可以使用transform

transform:rotate(7deg);

可以根据度数旋转rotate(7deg)

于 2013-08-16T14:02:02.453 回答