16

私が2つのDIVを持っているとしましょう:

​&lt;div class="div1"></div>
<div class="div2"></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

両方を回転させたい:

div {
    position: absolute;
    width: 100px;
    height: 100px;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
}

そして、私はそれらを独立して動かしたいと思います:

.div1 {
    background-color: red;
    -webkit-transform: translate(100px,0px);
    -moz-transform: translate(100px,0px);
}
.div2 {
    background-color: green;
    -webkit-transform: translate(0px,100px);
    -moz-transform: translate(0px,100px);
}​

問題は、回転と移動の両方がtransformプロパティを使用するため、移動が回転をオーバーライドすることです。値を相互にオーバーライドする代わりに、値をスタックさせることは可能ですか?

注:
単純な変換だけでなく、複雑な変換関数を使用するため、それらをjustプロパティleftで置き換えることはできません。 私は多くのDIVを持っているので、個々のプロパティを割り当てる前に、それらすべてを選択して共通のプロパティを適用する方がはるかに効率的です。top

参照:jsFiddle

4

3 に答える 3

19

残念ながら、構文とカスケードがどのように機能するかにより、説明されているように変換をスタックすることはできません。翻訳の前にローテーションを再宣言する必要があります。

.div1 {
    background-color: red;
    -webkit-transform: rotate(30deg) translate(100px,0px);
    -moz-transform: rotate(30deg) translate(100px,0px);
}
.div2 {
    background-color: green;
    -webkit-transform: rotate(30deg) translate(0px,100px);
    -moz-transform: rotate(30deg) translate(0px,100px);
}​
于 2012-07-31T02:50:33.153 に答える
1

キーフレームの使用はどうですか?

デモ: jsFiddle

コード:

.div1 {
    background-color: red;
    -webkit-animation: divone 2.0s ease-in-out forwards;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 1.0s;

}

.div2 {
    background-color: green;
    -webkit-animation: divtwo 2.0s ease-in-out forwards;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 1.0s;

}

@-webkit-keyframes divone
{

0%   {-webkit-transform: rotate(0deg);}
50%    {-webkit-transform: rotate(30deg);}
100%  {-webkit-transform: rotate(30deg) translate(100px,0px);}
}


@-webkit-keyframes divtwo
{
0%    {-webkit-transform: rotate(0deg);}
50%    {-webkit-transform: rotate(30deg);}
100%  {-webkit-transform: rotate(30deg) translate(0px,100px);}
} 
于 2012-07-31T06:34:48.997 に答える
0

「私は多くのDIVを持っているので、個々のプロパティを割り当てる前に、それらすべてを選択して共通のプロパティを適用する方がはるかに効率的です」とあなたは述べています。コーディングの方が効率的かもしれませんが、残念ながら結果はそうではありません。唯一の方法は、1回の呼び出しでそれらすべてを実行することです(BoltClockが投稿に私を打ち負かしたため)。

効率を取り戻すには、LESSまたはSCSS前処理の使用を検討してください。複数のトランジションのLESSの設定に関する最近の質問に対する別の回答が役立つ場合があります。

于 2012-07-31T02:52:39.270 に答える