CSS3 transformのZ軸 時計回転のrotateと縦横回転のXやYを併用する際の注意点

CSS3の新しいプロパティtransformにrotateというのがありますが、このrotateでrotate(90deg)からrotateX(180deg)という順で処理するのとrotateX(180deg)からrotate(90deg)とするので結果が違う理由を検証しました。「rotate」は時計回転、「rotateX」は上下の回転、「rotateY」は左右の回転です。

スポンサーリンク


tarnsform: rotate(90deg)の後にrotateX(180deg)を行うのと、rotateX(180deg)の後にrotate(90deg)を行うのでは、表示される内容が違ったので検証して見ました。

CSS3の新しいプロパティtransformにrotateというのがありますが、「rotate」は時計回転、「rotateX」は上下の回転、「rotateY」は左右の回転です。

元画像

ふなっしー

rotate(90deg);

ふなっしー

rotateX(180deg);

ふなっしー

rotateY(180deg);

ふなっしー

このrotateで時計方向に90度回転した状態で、さらにrotateXやrotateYを追加すると、上下や左右の起点はどちらになるのかが疑問でした。

rotateX(180deg)を例にすると、90度回転される前の元画像の上下を基準に回転するのなら次のようになります。

ふなっしー

そうではなく、rotate(90deg)が適用されて横向きになっている画像の上下を回転するのであれば、次のようになります。

ふなっしー

これは試せばいいだけの話なのでやってみました。

rotateを複数適用するCSSの書き方

rotateを複数適用させたい時は、transformに各rotateを半角スペースで区切って書けば出来ます。

ただ、2015年4月13日時点では、ベンダープレフィックスをつけないと反映されないブラウザもありますので、冗長ですが下のようになります。これはrotate(90deg)で画像を時計回転で90度回して、さらにrotateX(180deg)で180度反転させるという場合です。

.class_name {
	transform: rotate(90deg) rotateX(180deg);

	/* ベンダープレフィックス */
	-moz-transform: rotate(90deg) rotateX(180deg);
	-webkit-transform: rotate(90deg) rotateX(180deg);
	-o-transform: rotate(90deg) rotateX(180deg);
	-ms-transform: rotate(90deg) rotateX(180deg);
}

上のcssを実際に適用したら下の通りになりました。

ふなっしー

結論として、rotateを複数適用してもすべて元の画像を基準にされるという事です。考えてみれば当たり前の話で、もし画像のスタイルシートにheightやwidthが指定してあった場合、横になった時にそれが変わってしまうと困ります。

元の状態が基準であるならrotateとrotateXの順序を入れ替えた、次のどちらも同じ結果になるはずです。

  • transform: rotate(90deg) rotateX(180deg);
  • transform: rotateX(180deg) rotate(90deg);

ところが、このように入れ替えてみると違う表示結果となります。

rotateを複数適用する場合、順序が重要

先ほどの順序を次のように入れ替えてみました。

.class_name {
	transform: rotateX(180deg) rotate(90deg);

	/* ベンダープレフィックス */
	-moz-transform: rotateX(180deg) rotate(90deg);
	-webkit-transform: rotateX(180deg) rotate(90deg);
	-o-transform: rotateX(180deg) rotate(90deg);
	-ms-transform: rotateX(180deg) rotate(90deg);
}

その結果です。

ふなっしー

これは次のように推移しているということでしょうか?

  1. 上下を180度回転
  2. 時計方向に90度回転

そうであれば、時計方向は180度反転した後は逆さまになる、つまり反対側から見た状態という事のようです。

ふなっしー => ふなっしー

X軸 Y軸 Z軸

X軸は横線、Y軸は縦線です

X軸Y軸

rotateXは横線を基準に回転するので、rotateX(180deg)は上下の反転になります。また、rotateYは縦線を基準に回転するのでrotateY(180deg)は左右の反転になります。

rotateX(180deg);

ふなっしー

rotateY(180deg);

ふなっしー

XとYで2次元なのですが、rotateにはもうひとつ3次元の座標Z軸があります。

xyz軸

このZ軸はモニター画面の手前からモニター奥に伸びているイメージです。

rotateXやrotateYで180度回転させた画像は奥から見ているのと同じだという事です。

後ろから見ている状態と同じと考えれば時計回転が逆になるのも納得できます。

通常の状態の時計回りは右回り

時計回転はZ軸で変わる

逆の時計回りは左回り

時計回転はZ軸で変わる

rotateZについて

なのでrotateXやrotateYを処理してから時計回転のrotateを行うのと、時計回転のrotateをやってからrotateXやrotateYを行うのでは結果が違うという事だと思います。

下の画像の場合、rotate(90deg)は赤い矢印方向への回転。rotateX(180deg)は、黄色い線側と青い線側の反転です。

時計回転のrotate(90deg)後にrotateX(180deg)

  1. まずrotate(90deg)で赤い矢印方向へ90度回転
  2. その後rotateX(180deg)で黄色い線側と青い線側が反転

ふなっしー=>ふなっしー=>ふなっしー

rotateX(180deg)後に時計回転のrotate(90deg)

  1. まずrotateX(180deg)で黄色い線側と青い線側が反転
  2. その後rotate(90deg)で赤い矢印方向へ90度回転

ふなっしー=>ふなっしー=>ふなっしー

試しにrotateX(180deg) => rotate(90deg)の順のrotateの値を90degではなくマイナスの-90degにしてみます。

rotateX(180deg) => rotate(-90deg)の順
ふなっしー

rotate(90deg) => rotateX(180deg)の順で処理したのと同じ結果になりました。

まとめ

まとめると次のように言えると思います。

  • CSS3のtransformには複数の処理を書ける。
  • 複数の処理を書く場合は半角スペースで区切る。
  • 複数処理の実行は書いてある順番で行われる。
  • 処理の基準となるX、Y、Zの各軸は処理前の画像の状態と常に同じ
  • ただし、時計回転に関してはZ軸の向きによって見え方が変わるので注意!

関連コンテンツ

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください