私が2つのDIVを持っているとしましょう:
<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