【css】transform:matrix3dのちょっとしたお話

この記事はOthloTech Advent Calendar 2016の19日目の記事です。

こんにちは。OthloTechにデザイナーとして参加しているちーずです。
今回はあまりスポットを当てられていないけどなかなか面白そうなtransform:matrix3dについてお話します。

matrix3dについて

リファレンスにはこのように記載されています。

transformプロパティのmatrix3d()関数は、要素に3D変形を適用する際に使用します。 マトリクスとは行列のことで、matrix3d()関数では行列を使用して3D変形を指定します。

変形の内容は16個の数値で指定します。 基準となる値は、matrix(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 )で、この場合には座標は変化しません。

指定すべき数値が16個もあると複雑に感じますが、以下のように4×4に分けて考えると理解しやすいでしょう。 16個の数値とはつまり、4x4の行列を指定していることに他なりません。

(引用元：htmq.com)

簡易的に言えば、行列を使って3d変形ができるって感じですね。
行列って聞くとちょっと難しそう。。。。
実際、css以外にも様々な言語で関数として用意されていて、glMatrix, mjs といった専用ライブラリを使用して計算することが多いみたいです。

書き方

上記のとおり、16個の数値で4×4の行列を表しています。
よって、コードを書くときは下記のような書き方が良いです。

matrix3d(
    a, b, c, d, 
    e, f, g, h, 
    i, j, k, l, 
    m, n, o, p 
)

なお、行列の計算のしかたはこちらのサイト(http://scene-live.com/)がとてもわかりやすかったのでご覧ください。

webサイトでの使われ方

matrix3dを使ってるサイトは正直多くはありませんでした。
(探したのですが、あまりみつからず。。。。)
その数少ない使用例を紹介します。

franklinta.com

こちらは、実際にmatrix3dを紹介している記事です。
イラストの中の画面に合うようにmatrix3d()を使ってdivを変形させて、その中にwikipediaの記事を表示させてます。
このように、中の要素も全て変形した状態になるので、工夫すれば面白い見せ方ができますね！

HYPER MARKET

こちらは、渋谷のモバイルアクセサリー店の「HYPER MARKET」さんのサイトです。
記事が書いてある紙をちょっと奥ゆきをもたせるように立てさせ(?)、それをスクロールして記事を読めるようなデザインになってます。
しっかり影も動いていたり、奥行きをリセットさせたり、様々な工夫がされているサイトですね。

まとめ

matrix3dは行列の知識を必要とするため、数学が苦手な人は使わないことをお勧めします。
rotateやperspectiveを駆使して動きを作成した方が簡単かも。。。？
実際にmatrix3dを使ってcssで3dの動きをつけたいときはcss3 Generaterを使うことをおすすめします。

　ちょっとした感想

初めての投稿で、書き方に迷うことがとても多かったです。
もし間違った情報や、書き方に誤りがあった場合、コメントをお願いします。
(codepenの使い方ミスでDEMOをお見せできなかったので　、今後追加いたします。)