CSS Transforms: (3D/perspective) - メモログの続きで3d rendering contextについて。CSS TransformsのExample7から9を紹介するだけという内容。
Example7のサンプルと、Example8のサンプル。 
両者の違いは、後者はtransform-style:preserve-3dが指定されていて、青とライムの要素が3D rendering contextの中にいるということ。2Dの場合でも、perspectiveの効果で長方形が台形状に描かれるけど、3Dでのレンダリングのような奥行きの空間は存在しない。台形状に描かれているだけ。
なので、前者の2Dの場合は、台形状の要素（青）を親に持つ要素（ライム）が、rotateX（+transform-origin）による変換で青より短い台形のように描かれる。3Dの場合は、奥行きの空間が存在して、青の要素はY軸方向に回転している（横回転）。ライムの要素はそこからさらにX軸方向に回転する（縦回転）。
Example9では、ここからさらに「交差（intersect）」の状態を例示している。 
3Dの場合は、奥行きの空間が存在するので、要素のZ軸方向への傾き方によって、要素が交差するという現象が発生する。ブラウザで実際に試してみたら、要素の左半分だけ親要素の後ろ側にいかなかったですけど（ある回転角度で全部後ろ側にいく）。
そんな感じ。3D redering contextは描画する上で奥行きの空間が必要な場合、必要となる。一つの要素をY軸方向に回転させたいだけの場合は、3D rendering contextがなくてもperspectiveの指定だけでそれっぽくなる。