カテゴリー

キーワード

 
> 【CSS3】transformプロパティ...

【CSS3】transformプロパティの値、matrix()とmatrix3d()を紹介します


2015 年 7 月 24 日 投稿    view: 4340
タグ:
このエントリーをはてなブックマークに追加

CSS transform:matrix()

【CSS3】transformプロパティの値、matrix()とmatrix3dを紹介


こんにちは、WEBマーケティング部の杉尾です。


前回は、


【CSS3】CSSのtransformの値を4つ紹介【scale、translate、rotate、skew】


を紹介しました。


今回からはそれに引き続いて、transformプロパティの3Dを順番に紹介していきたいと思います。


まずは、transformプロパティの値、matrix()matrix3d()について、です。



そもそもmatrix()、matrix3d()とは?

要素を変形させるCSS3のプロパティであるtransformの値です。


前回紹介したscale、translate、rotate、skewという値は、まず要素をどのように変形させるかを指定し、どのくらい変形させるかを数値で示したものでした。


matrix()、matrix3d()はそれらと違い、変形を全て数値化して表したものです。


ですから、慣れていないと数字が羅列されているだけなのでどういう変形をするか見当がつきません。


しかし、当然ですが、しっかりとした規則性をもって並べられているので、わかってしまえば簡単です。


次項で、まず2D変形のmatrix()について詳しく紹介します。


transform:matrix()

まずは参考ソースから。


HTMLは変形を適用させるimg要素と、それを囲うdiv要素、説明のp要素のみ書いています。


【HTML】

<div class="test">
    <p>transform:matrix();</p>
    <img src="okawa.jpg">
</div>

【CSS】

div.test {border:1px solid red;}
div.test img {transform:matrix(0.8,0,0,0,150,0)}

【テストサンプル】

transform:matrix();


色々変更しながら試してみた結果、それぞれの数字は以下のように対応しているようです。


matrix(a,b,c,d,e,f)


a(1番目の値)⇒ X軸(水平方向)の縮尺
b(2番目の値)⇒ Y軸(垂直方向)の傾斜率
c(3番目の値)⇒ X軸(水平方向)の傾斜率
d(4番目の値)⇒ Y軸(垂直方向)の縮尺
e(5番目の値)⇒ X軸(水平方向)の移動距離
f(6番目の値)⇒ Y軸(垂直方向)の移動距離


では、次に3D変形を指定するmatrix3d()を紹介します。


transform:matrix3d()

matrix3d()は()内数値を16コ指定してください。


ちなみにtransformの3Dは『Safari』、『iOS Safari』、『Android Browser』が対応しきっていないので、ベンダープレフィックスの『-webkit』をつけてください。


ブラウザ対応状況をCaniuse.comで見ると、こういう感じです。


transform:matrix3d()のブラウザ対応状況


例えば、


.sample {
    -webkit-transform: matrix3d(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p);
    transform:matrix3d(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p);
}

のように書きます。


基準値は


matrix3d(1,0,0,0,1,0,0,0,0,1,0,0,0,0,1)


です。


matrix()と比べると、数が一気に10コも増えて混乱しそうになりますが、ちゃんと規則性がありますので大丈夫です。


4×4に分けて考えると理解しやすいと思います。


matrix3d(
    1, 0, 0, 0, 
    0, 1, 0, 0, 
    0, 0, 1, 0, 
    0, 0, 0, 1 
)

どういう風に座標を導き出すかというと、計算式にして割り出します。


こんな感じです。


x * 1 + y * 0 + z * 0 + 1 * 0 = 1
x * 0 + y * 1 + z * 0 + 1 * 0 = 1
x * 0 + y * 0 + z * 1 + 1 * 0 = 1
x * 0 + y * 0 + z * 0 + 1 * 1 = 1


この計算式で出た値である(1,1,1,1)は、何も変形しないという行列(つまり基準値)です。


具体的に、どこの値を変更するとどうなるかということを図に示しました。


matrix3dの行列を説明する画像1


<要素を平行移動させるには、Px、Py、Pzに入る数値を変更してください。


matrix3dの行列を説明する画像2
要素を拡大・縮小させるには、Sx、Sy、Szに入る数値を変更してください。


ここからは、より複雑な計算になります。


matrix3dの行列を説明する画像3


θの部分には角度の値が入ります。


matrix3dの行列を説明する画像4


θの部分には角度の値が入ります。


matrix3dの行列を説明する画像5


θの部分には角度の値が入ります。


下の3つはこういうものなんだな、というくらいに留めておいて構いません。


というのも先ほども述べましたが、計算が複雑になってくるので、専用のライブラリを使う方が早いからです。


glMatrix

mjs


この辺りのJavaScriptライブラリを使えば、簡単に計算ができます。


<最後に、平行移動と拡大・縮小の参考ソースをご覧ください。


※HTMLは変形を適用させるimg要素と、それを囲うdiv要素、説明のp要素のみ書いています。


***平行移動***

【HTML】

<div class="test3">
    <p>transform:matrix3d();</p>
    <img src="images/okawa.jpg" height="200px">
</div>

【CSS】

div.test3 {border:1px solid red;}
div.test3 img {transform:matrix3d(1,0,0,0,
                                  0,1,0,0,
                                  0,0,1,0,
                                  30,30,30,1)}

【テストサンプル】

transform:matrix3d();



***拡大・縮小***

【HTML】

<div class="test3">
    <p>transform:matrix3d();</p>
    <img src="images/okawa.jpg" height="200px">
</div>

【CSS】

div.test3 {border:1px solid red;}
div.test3 img {transform:matrix3d(1.5,0,0,0,
                                  0,1.5,0,0,
                                  0,0,1.5,0,
                                  0,0,0,1)}

【テストサンプル】

transform:matrix3d();



まとめ

数字ばかり出てくるので、数字アレルギーの方にはきつかったかもしれません。


ですが、規則性さえつかめば難しいことはありません。


matrix3dの回転に関してはライブラリを使って、値を導き出してくださいね。



では、次回はperspectiveプロパティとtransform:perspective;を紹介します。

最後までお読みいただき、ありがとうございました。

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事