CSS3のtransformプロパティについて教えてください。

Question

transformのrotate関数には下記の4つのあるかと思います。

• rotate()
• rotateX()
• rotateY()
• rotateZ()

rotate()とrotateZ()の違いは何でしょうか？
実際に試しましたが、上記は同じ結果になります。

rotate()はショートハンドプロパティでもなさそうですし、それぞれの使い分けがわかりません。

ご存じの方いれば、ご教示ください。
よろしくお願いいたします。

Answer 1

rotateとその他では2Dと3Dという違いがあります。

Comments

[退会済みユーザー]

なるほど。
3Dはrotate3d()で指定するものかと思っておりましたが、rotateXとrotateYとrotateZで3Dの指定ができるんですね。

調べたページでは、あわせて設定できる記述がなく、私が勝手にあわせて設定できないものと勘違いしておりました。

下記の記述をすることで指定できました。

transform:rotateZ(0) rotateY(90deg) rotateX(90deg);

回答ありがとうございました。