実験
CSS 3D transform
CSS3 の 3D 機能をテストするためのページです。今のところ Webkit 系のブラウザーでしか正しく表示出来ません。
#iphone {
width:320px; height:356px; overflow:hidden;
-webkit-transform-style:preserve-3d;
-webkit-perspective:595;
-webkit-perspective-origin:50% 50%;
-webkit-transform-origin-x:50%;
-webkit-transform-origin-y:50%;
-webkit-transform-origin-z:50%;
}
#rainbowapple {
position:absolute; left:150px; top:170px;
width:20px; height:20px;
}
width:320px; height:356px; overflow:hidden;
-webkit-transform-style:preserve-3d;
-webkit-perspective:595;
-webkit-perspective-origin:50% 50%;
-webkit-transform-origin-x:50%;
-webkit-transform-origin-y:50%;
-webkit-transform-origin-z:50%;
}
#rainbowapple {
position:absolute; left:150px; top:170px;
width:20px; height:20px;
}
transform では上記の他に 4x4変形行列を用いてアフィン変換を行う matrix3d という関数があります。 拡大、縮小、回転、移動などを一度に実行してしまう 3D の基本の関数なんだそうです。だけど引数が16個もあって、こんなの使いこなせない。
-webkit-transform: matrix3d(m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44);
そんなわけで rotate、scale、translate などの分かりやすい関数が別に用意されているのです。ウェブブラウザー (Safari) がこれら個別の変形を
乗算して matrix を自動的に計算してくれる仕組み。
順に実行する仕組み。合成変換を行うには自分で行列を作って matrix を用いる必要があるようです。