サンプル例1の内容

【例1】白枠をマウスホバーすると、青色のdivが90degY軸回転します。
通常は90deg回転すると、見えなくなりますが、perspective:500pxを指定しているので、90degY軸回転した青枠も角度がついてなんとか見える状態になっています。
黄枠は青の子で何も指定していないので、青に従って同じように回転します。

例1へ

サンプル例2の内容

【例2】黄枠に60degを指定しているので、青枠内で60degY軸回転した見た目で表示されています。
transform-style を指定していないので default の flat となり、マウスホバー時、青枠が90degY軸回転した時には、 青枠内にとどまっている見た目になります。（何も指定してない例1と同じ）
イメージとしては、青枠がテレビ本体で、黄色はそのモニターに映ってる絵という感じになります。テレビを回転させても、中の映像は平面なのでテレビ画面から飛び出したりはしないという雰囲気です。

例2へ

サンプル例3の内容

【例3】青枠に transform-style : preserve-3d を指定しているので、黄枠の60degが立体になっています。（回転の中心がそれぞれボックス中央なので、黄枠は中央あたりで青枠を突き抜けてる）さらにマウスホバーで青枠が90deg回転すると黄色枠は青枠の面から60deg回転しているので面を突き抜け交差するように表示されます。
※IE10で確認すると、未サポートのため、例2と例3は同じ結果になります。

例3へ

サンプル例4の内容

【例4】青枠に transform-style : preserve-3d を指定。黄枠に Y軸-30deg Z軸-30deg を設定してみた例です。立体的に黄色が突き抜けているような感じになります。
この状態で、青色divに overflow : hidden を指定してみたのが例4bです。
hidden 指定を追加すると、z軸方向へ突き抜けず、平面に張り付いた形になりました。
※IE10は、未サポートなので、青枠の面に張り付いた状態になります。

例4へ

考察

IE10が未サポートなので、せっかくの [transform-style : preserve-3d] が絵に描いた餅状態なのが残念です。
これが使えれば、立体の回転などで大活躍できるのですが、仕方がないので、各面を自分で個別に配置し、個別に回転などをしなければいけない状態となっています。
原森webでの活用したかったけど仕方がないので別のやり方をした事例
→ [rgba(10進) rgb(16進)変換ツールの色サンプルの回転処理等]

要素内の子要素の表示指定プロパティ

transform-style

指定した要素の子要素が、3D空間の中でフラットに描画されるか、立体的に描画されるかを指定。値は flat or preserve-3d 。初期値＝flat。
Internet Explorer と Opera は未サポート。

ページトップへ