skewY(ay)で個別に指定するときも同様です。transform-originプロパティ変形の原点を指定します。0)からの距離となります。Transformsのときと同様ですが、Z方向場合にはパーセンテージとキーワードは使用できません。rotateY(45deg)し、transform-originの値を変更したものです。sample」の実行結果transform-styleプロパティこのプロパティは、指定した子要素が3D空間上で平面として描画されるか、立体として表示されるかを指定します。指定できる値はflatまたはpreserve-3dで、初期値はflatです。flatを指定すると、3D空間上で平面として描画され、preserve-3dを指定すると、立体的に表示されます。preserve-3dを指定したものです。sample」の実行結果flatを指定した1つ目の例ではZ方向のものも平面になっているのが分かります。perspectiveプロパティtransformプロパティで使うperspective()関数と同じ意味です。違いは、perspective()関数が要素そのものの深度を指定するのに対し、このperspectiveプロパティでは、指定した要素の子要素全体の深度を指定することにあります。同様に、指定には<length>形式を用い、0より大きい値を指定しなければなりません。perspective-originプロパティperspectiveプロパティの視点ポイントの位置を指定します。値は2つあり、X方向Y方向の座標を指定します。値にはtransform-originと同様に、<percentage>と<length>、キーワードが使えます。bottomとなります。0は要素の左上の座標です。2つ目の値が省略され、1つ目の指定がキーワードでなければ、もう1つの値は50%として扱われます。1つ目がX方向のキーワードの場合は、Y方向は50%となり、Y方向のキーワードの場合はX方向が50%として扱われます。仮に、Z軸の負の方向に移動した要素の親要素にperspectiveを指定し、perspective-originのY方向の値を増やすと、次のような図になります。100%と指定されたものです。sample」の実行結果(斜め上から)正面から見ると次のようになります。sample」の実行結果(正面から)backface-visibilityプロパティbackface-visibilityプロパティは、要素の裏側を表示するかどうかを指定するプロパティです。値にはhiddenとvisibleが使用可能で、初期値はvisibleとなっています。hiddenを指定すると、要素の表面が見えなくなった(たとえばrotateY(180deg)された)場合に、その要素は見えなくなります。visibleの場合は、その要素を裏側から透かして見るような感じになります。visibleを指定すると次のようになります。sample」の実行結果transformプロパティでの注意点このプロパティに指定する各関数ですが、指定するときは順番に注意したほうがいいかと思います。関数Bの行列となり、そこから座標が計算されるということです。基本的に行列の乗算には交換法則が成り立ちませんので、行列AとBがあるとき、A*BとB*Aは別物となります。transformプロパティに指定する関数は書いた順に適用される、と覚えておけばいいと思います。3Dでの回転について上の関数の書き順にも関係してくるのですが、変形のない状態の場合、見た目の上ではX軸は左から右へ、Y軸は上から下へ、Z軸は奥から手前へ、と数値が増えていきます。Transformsにおいて回転変形を行うと、その要素の各軸は回転に伴って移動します。rotateY(180deg)すると、その要素は裏返したような状態になりますが、このときX軸は右から左へ、Z軸は手前から奥へ、となります。translateZ(100px)とします。rotate(180deg)では手前側に移動した後に回転となるので、手前側にあるように見えます。rotate(180deg)とします。回転する立方体を作ってみる練習を兼ねてアニメーションしながら回転する立方体を作ってみます。ベースとなる部分から。実際にはプロパティごとに各ベンダープレフィクスが必要となりますが、記事内には書きません。関係ない部分も省略しています。preserve-3dを指定します。この時点では次のようになります。次に、各パネルを回転させ、立方体になったとき、表が外側に来るようにします。正面からだとあまり変化がないように見えますが、ちょっと斜め上から見ると次のようになります。2」の実行結果(斜め上から見た場合)それでは、立方体にするために各パネルを移動します。前に説明したように、回転済みのものを移動するときには要素と共に回転した軸を考慮する必要があります。ここで、各パネルの表が外側を向くように回転させていますので、どのパネルも移動する方向はZ軸の正の方向になります。3」の実行結果(斜め上から見た場合)立方体ができました。それでは、これをアニメーションで回転させます。アニメーションの指定については、以前書いた「CSSアニメーションの基礎」を参考にしてもらえればと思います。4」の実行結果アニメーションができました。次は遠近感を出すためにPerspectiveを指定します。5」の実行結果(アニメーション開始後)何か変ですね。なったのか考えてみます。パネルが立方体を作るための変形(回転と移動)をする際、親要素で指定されたPerspectiveが加わります。それは全ての子要素から見て同じ位置であり、親要素のz=0から視点までの距離です。この親要素を回転させると、Z軸も一緒に回転するわけで、それ伴ってPerspectiveでの視点も移動します。子要素はその回転する視点に合わせてを変形するので、このようなことになってしまったと考えられます。すればいいのかというと、.cubeが回転する際にPerspectiveの視点が一緒に動いてしまわないようにすればいいのです。.cubeの親、.drawingでperspectiveプロパティによる指定をしてしまえば、その視点は動かないわけですから、遠近感のある立方体ができあがるはずです。6」の実行結果(アニメーション開始後)期待通りの動きになりました。transformにperspective()関数で指定する場合には、回転の前に書かなければなりません。ここではキーフレームの指定の中にあります。8これで無事に回転する立方体が完成しました。hiddenを指定してください。Cube最後にいつものことですが、この記事を鵜呑みにせず、自分でも仕様を確認したり、実際に試してブラウザの調査ツールなどで調べてみたりしてください。仕様が変更されるかもしれませんし、そもそも記事に誤りがある可能性もあります。最後まで読んでいただき、ありがとうございました。Requestを送るIssueを作成するTwitterでメンションする記事を共有TwitterFacebookPocketはてなブックマークLINEコンテンツホームブログこのサイトについて。