WebKitの３D回転をざっくりまとめてみた

MobileWebKitで要素を回転させる系のCSSをざっくりまとめてみました。PC版のsafariではまだ実装されていないみたいです。iPhone/Android向けサイトで使ってみるといいと思います。

CSS Transform/Transitionの基本

-webkit-transformで２次元や３次元の位置や角度、倍率を規定する。-webkit-transitionで-webkit-transformが変化する時のアニメーションを規定する。

流れとしては-webkit-transitionを決めた後に-webkit-transformを変化させる感じ。

javascriptから操作する時は-を省略して二文字目以降を大文字にする。

CSS:-webkit-backface-visibility:hidden;
JS:hogehoge.style.webkitBackfaceVisibility = "hidden";

詳しくはこちら。

CSSだけでアニメーションプルダウンメニューを作る
リッチっぽいiPhone向けサイトを作るためのCSS3アニメーション

-webkit-transitionだけでなく影とか、角丸とか、透明度とかにもアニメーションが適用される。

とりあえず回してみる

普通に角度を指定するとこうなる。

-webkit-transform:rotate(180deg);/*180°回転させる*/

リンク:http://hayashi311.com/demo/css3test3.html

これは
-webkit-transform:rotateZ(180deg);/*Z軸を中心に180°回転させる*/
と表すことができる。

同じようにX軸Y軸を中心に回転させることもできる。
-webkit-transform:rotateX(180deg);/*X軸を中心に180°回転させる(縦方向に回転)*/
-webkit-transform:rotateY(180deg);/*Y軸を中心に180°回転させる(横方向に回転)*/


リンク:http://hayashi311.com/demo/css3test4.html

３Dにしてみる

３D表示をオンにするときは

-webkit-transform-style:preserve-3d;

を指定する。デフォルトは"flat"で２D表示。


さらにパースペクティブ(遠近感)を値で指定

-webkit-transform:perspective(800);

リンク:http://hayashi311.com/demo/css3test5.html


この値が小さければ(例:200)遠近感が激しくなって、

この値が大きくなると(例:1000)大人しくなる


うまく言えない＞＜

これを角度と同時に使う時は

-webkit-transform:rotateY(180deg) perspective(1000);

というように並べて書く。

要素の裏を表示しない

-webkit-backface-visibility:hidden;

で裏を表示させないことができる。デフォルトは"visible"で裏が表示される。

これは２つの要素を使って表裏を表現するアニメーションでよく使う。というか、それ以外に活用法が思いつかない。jQueryを使ったデモは以下

http://paulbakaus.com/lab/css/flip/

同じ位置に表を向いた要素(見えてる)と裏を向いた要素(裏は見えない)を用意して、それぞれ同時に180°回転させると表裏があるように見える。

中心をずらす

-webkit-transform-origin:X Y Z;を使って-webkit-transformの中心をずらす。かっこよく回転する。

-webkit-transform-origin:30% 60% 50;/*全体のXの長さの30%、全体のYの長さの60%、Z方向に50の位置を中心に-webkit-transformを行う*/

デフォルトは-webkit-transform-origin:50% 50% 0;

XとYは％で指定できるけど、Zはできない点に注意。


リンク:http://hayashi311.com/demo/css3test6.html

要素として軸がぶれている!!

まとめ

くるくるくるくるわーい


参考：http://webkit.org/specs/CSSVisualEffects/CSSTransforms.html