0

私はコードを持っています...

    $(document).ready(function(){

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

});

...私のdivのサイズを移動して変更します。

私はインターネットで見回していて、jQueryを使用してdivを回転できる機能を見つけました。残念ながら、jQuery は CSS を使用してこれを行います。つまり、サイズと位置の変更中に div を回転させることはできません。

私が望んでいるのは、div が回転し、サイズが大きくなり、位置が変化することをすべて同時に行うことです。これが可能かどうかはわかりませんが、可能である場合は、どのように行われたかを説明していただけますか。

私が考えることができる唯一のことは、jQuery の代わりに CSS を使用して 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 に答える