web-dev-qa-db-ja.com

回転変換のみを移行する方法は？

たくさんの要素を使用して背景画像を作成していますが、それらはすべて自由に回転しながら絶対に配置されます。

問題は、これらのオブジェクトの回転のみを遷移させ、topプロパティやleftプロパティは遷移させないことです。そしてどうやらtransition: transform 30s;は許可されていません。私はやるという素晴らしいアイデアを持っていました

transition:all 30s ease-out;
transition: left 0s;
transition: top 0s;

しかし、それもうまくいきません。どうすればこれを解決できますか？

cssrotationtransition
19
Digger

変換はベンダープレフィックスです

の代わりに

transition:all 30s ease-out;
transition: left 0s;
transition: top 0s;

行う

-webkit-transition: -webkit-transform $amount-of-time ease-out;
-moz-transition:    -moz-transform $amount-of-time ease-out;
-o-transition:      -o-transform $amount-of-time ease-out;
-ms-transition:     -ms-transform $amount-of-time ease-out;
transition:         transform $amount-of-time ease-out;
22
Conqueror

回転プロパティのみをアニメーション化するために、これは少なくともChromeで機能することがわかりました。

_transition: transform 2.0s;
_

1つの遷移プロパティ内のさまざまなプロパティにさまざまなアニメーション時間を設定できます。

_transition: transform 2.0s, color 5.0s, font-size 1.0s;
_

rotateプロパティのトリックは、具体的には、代わりにtransformプロパティを使用していることです。直感的には、これは機能するはずですが機能しません。

_transition: rotate 2.0s; /* DOES NOT WORK */
_

代わりに、transformの代わりにrotateを使用する必要があります。

_transition: transform 2.0s;
_

これは、おそらく_rotate: 90deg_がtransform: rotate(90deg)の省略形であるためです

注意

transitionがすべての主要ブラウザの最新バージョンでサポートされるようになりました。古いブラウザとの互換性を高めたい場合は、次のようにすることができます。

_-webkit-transition: -webkit-transform 2.0s, color 5.0s, font-size 1.0s;
-moz-transition: -moz-transform 2.0s, color 5.0s, font-size 1.0s;
-ms-transition: -ms-transform 2.0s, color 5.0s, font-size 1.0s;
-o-transition: -o-transform 2.0s, color 5.0s, font-size 1.0s;
transition: transform 2.0s, color 5.0s, font-size 1.0s;
_
6
Chris Dutrow