Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

この記事は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を使ってるサイトは正直多くはありませんでした。
(探したのですが、あまりみつからず。。。。)
その数少ない使用例を紹介します。

スクリーンショット 2016-12-19 1.11.58.png

franklinta.com

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

スクリーンショット 2016-12-19 1.12.31.png

HYPER MARKET

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

まとめ

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

 ちょっとした感想

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

cheez921
フロントエンドエンジニアになりたい新卒2年生
a-hikkoshi
当社は、親会社である株式会社エイチームの経営理念をそのままに、引越しの比較サービス開始以降、大切にしてきた「三方よし」の理念を基本として、世の中に求められるサービスの創造を目指します。 一緒に働けるエンジニアを募集しております。下記URLよりご応募ください。 https://bit.ly/3lwf7QJ
https://hikkoshi.a-tm.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away