1247 Matrix3D の合成 Multiply Matrix3D ここでは matrix3d 関数で 3D の変形 ( 拡大縮小 傾斜 ) 回転 移動を同時に行いたい場 合の数値の指定方法について説明します マトリックスに指定する数値はつぎのようになっています ( 注 : これは数学上のマトッリ クスの数値の並びです 数学上のマトリックスで計算して 最後に matrix3d 関数の数値の 並びで指定します ) m11 m21 m31 m41 m11 m12 m13 m21 m22 m23 m31 m32 m33の 部分は線形変換行列といい 要素を変形 ( 拡大縮小 m12 m22 m32 m42 傾斜 ) させたり回転させたりすることができます m13 m23 m33 m43 m14 m24 m34 m41 m42 m43 m44は Z 軸方向の 奥行き深度やX 軸方向 Y 軸方向 Z 軸方向の移動距離 m14 m24 m34 m44 を指定しますが 変形や回転には影響しません 先ず覚えておかなければならないのは marix3d 関数で変形 ( 拡大縮小 傾斜 ) 回転を同 時に行いたい場合には 3 3 行列の掛け算が必要になるということです m11 m12 m13 m21 m22 m23 m31 m32 m33 の部分だけを 3 3 行列 m11 m21 m31 m12 m22 m32 m13 m23 m33 として計算します 1
3 3 行列の掛け算 1 2 3 m11 m21 m31 s11 s21 s31 m12 m22 m32 s12 s22 s32 m13 m23 m33 s13 s23 s33 4 5 6 m11 m21 m31 s11 s21 s31 m12 m22 m32 s12 s22 s32 m13 m23 m33 s13 s23 s33 7 8 9 m11 m21 m31 s11 s21 s31 m12 m22 m32 s12 s22 s32 m13 m23 m33 s13 s23 s33 1 2 3 m11s11+m21s12+m31s13 m11s21+m21s22+m31s23 m11s31+m21s32+m31s33 4 5 6 = m12s11+m22s12+m32s13 m12s21+m22s22+m32s23 m12s31+m22s32+m32s33 7 8 9 m13s11+m23s12+m33s13 m13s21+m23s22+m33s23 m13s31+m23s32+m33s33 計算例 1 4 7 4 7 1 2 5 8 5 8 2 3 6 9 6 9 3 1x4 + 4x5 + 7x6 1x7 + 4x8 + 7x9 1x1 + 4x2 + 7x3 = 2x4 + 5x5 + 8x6 2x7 + 5x8 + 8x9 2x1 + 5x2 + 8x3 3x4 + 6x5 + 9x6 3x7 + 6x8 + 9x9 3x1 + 6x2 + 9x3 66 102 30 = 81 126 36 96 150 42 2
では 図形を X 軸方向へ 400px 移動 Z 軸方向へ 100px 移動 Y 軸を時計回りに 120 度回転 幅と高さを 2 倍に拡大 Y 軸方向へ 10 度傾斜させたい場合のマトリックスを計算してみま しょう それぞれの変形のマトリックスは次のようになります A.X 軸方向へ 300px Z 軸方向へ 100px 移動 のマトリックスは変形 ( 拡大縮小 傾斜 ) 回転のマトリックスに影響しない ので 計算からは除外します A.X 軸方向へ 300px Z 軸方向へ 100px 移動 B.Y 軸を時計回りに 120 度回転 1 0 0 400-0.5 0 0.8660254 0 0 1 0 0 0 1 0 0 0 0 1 100-0.8660254 0-0.5 0 0 0 0 1 0 0 0 1 C. 幅と高さを2 倍に拡大 D.Y 軸方向に 10 度傾斜 2 0 0 0 1 0 0 0 0 2 0 0 0.18 1 0 0 0 0 1 0 0 0 1 0 0 0 0 1 0 0 0 1 ( 注 : B.Y 軸を時計回りに 120 度回転 のマトリックスに指定する sinθ cosθの値は巻末の 度数 ラジアン sin cos tan 対応表 を参照してください また D.Y 軸方向に 10 度傾斜 のマトリックスに指定する 傾けたい角度 θの tanθ の値は 1242 Matrix2D 関数 (matrix) の章の transform プロパティの skewx( ) 関数と skewy( ) 関数に指定する値と matrix( ) 関数の c b に指定する値の関係 を参照してください 1. 先ず 分かりやすい C. 幅と高さを2 倍に拡大 と D.Y 軸方向に 10 度傾斜 の 3 3 行列を計算します 2 0 0 1 0 0 0 2 0 X 0.18 1 0 0 0 1 0 0 1 2x1 + 0x0.18 + 0x0 2x0 + 0x1 + 0x0 2x0 + 0x0 + 0x1 = 0x1 + 2x0.18 + 0x0 0x0 + 2x1 + 0x0 0x0 + 2x0 + 0x1 0x1 + 0x0.18 + 1x0 0x0 + 0x1 + 1x0 0x0 + 0x0 + 1x1 2 0 0 = 0.36 2 0 0 0 1 2. 次に B.Y 軸を時計回りに 120 度回転 と 1. の計算結果の 3 3 行列を計算します 3
= = -0.5 0 0.8660254 2 0 0 0 1 0 X 0.36 2 0-0.8660254 0-0.5 0 0 1 (-0.5)x2 + 0x0.36 + 0.8660254x0 (-0.5)x0 + 0x2 + 0.8660254x0 (-0.5)x0 + 0x0 + 0.8660254x1 (-0.5)x2 + 0x0.36 + 0.8660254x0 (-0.5)x0 + 0x2 + 0.8660254x0 (-0.5)x0 + 0x0 + 0.8660254x1 (-0.5)x2 + 0x0.36 + 0.8660254x0 (-0.5)x0 + 0x2 + 0.8660254x0 (-0.5)x0 + 0x0 + 0.8660254x1-1 0 0.8660254 0.36 2 0-1.7320508 0-0.5 3. 計算結果のマトリックスは次のようになります -1 0 0.8660254 300 0.36 2 0 0-1.7320508 0-0.5 100 0 0 0 1 これを matrix3d 関数に指定すると 次のようになります transform: 0, 2, 0, 0, 300, 0, 100, 1 ); Z 軸方向の奥行きを出すために perspective を指定しますが matrix3d 関数は perspective の指定が難しいので perspective 関数を別に指定します matrix3d 関数を使用した場合と matrix3d 関数を使用しない場合は次のようになります matrix3d 関数を使用した場合 transform: perspective( 800px ) 0, 2, 0, 0, matrix3d 関数を使用しない場合 transform: perspective(800px) translatex(400px) translate(100px) rotate(120deg) scale(2, 2) skewy(10deg); 4
では matrix3d 関数を使用しない場合と matrix3d 関数を使用した場合の 2 通りをアニメー ションさせて比べてみましょう サンプル CSS MultiplyMatrix3D の説明 HTML の記述 (MultiplyMatrix3D.html) id 属性 stage の div 要素 ( トランジションが動くステージ ) を作り その中にボックスを記述します id 属性 button の div 要素を作ります これがボタン ( 親ボックス ) になります font1 クラスでフォントを指定し Hover を記述します id 属性 box1 の div 要素 ( 子ボックス ) と id 属性 box2 の div 要素 ( 子ボックス ) を記をします box1 は matrix3d 関数を使用しないでトランジションさせ box2 は matrix3d 関数を使用してトランジションさせます <!DOCTYPE html> <html> <head> <title>multiplymatrix3d</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="multiplymatrix3d.css"> </head> <body> <p> matrix3d 関数を使用して 3D の変形と回転を同時に行いたい場合 (matrix3d の合成 ) </p> <div id="stage"> <div id="button"><font class="font1">hover</font> <div id="box1"></div> 5
<div id="box2"></div> </div> </div> </body> </html> CSS の記述 (MultiplyMatrix3D.css) 先ず トランジションが動く #stage とボタンとなる #button ボックス ( 親ボックス ) を記 述します #stage { width: 700px; height: 550px; border: solid 1px black; position: relative; #button は position を absolute にして 位置は top: 10px; left: 300px; で指定します 角丸矩形のボタンにしたいので border-radius プロパティでボックスの 4 隅の角丸の半径 を 10px で指定します #button { top: 10px; left: 300px; width: 120px; height: 50px; border: solid 1px black; border-radius: 10px; background-color: red; text-align: center; cursor: default; position: absolute; #box1 は matrix3d 関数を使用しないで X 軸方向へ 400px 移動 Z 軸方向へ 100px 移動 Y 軸を時計回りに 120 度回転 幅と高さを 2 倍に拡大 Y 軸方向へ 10 度傾斜させます #box1 の位置は top: 80px; left:-250px; サイズは width: 100px; height: 100px; で 色 は background-color: orange; で指定します transition は transform プロパティを 3 秒で ease-in-out でトランジションするように 記述します #button ボックス ( ボタン ) を hover した時の変化として #box1 ボックスに transform プ 6
ロパティで次のように指定します transform: perspective(800px) translatex(400px) translatez(100px) rotatey(120deg) scale(2.0, 2.0) skewy(10deg); -webkit-transform: perspective(800px) translatex(400px) translatez(100px) rotatey(120deg) scale(2.0, 2.0) skewy(10deg); transform プロパティに複数の関数を指定する場合には 間にスペースを入れて記述しなければいけないので注意してください ( 注意 )scale(2.0, 2.0) の記述については scale( ) の中の値の前後にスペースを入れないように注意してください スペースを入れると IE(Internet Explorer) ブラウザでは正しく動きません 他のブラウザではスペースを入れても問題なく動きます /****************************************************************************** * matrix3d を使用しない場合 (x 方向へ 400px 移動 z 方向へ 100px 移動 Y 軸を * * 時計回り 120 度回転 幅と高さ 2 倍拡大 Y 軸方向へ 10 度傾斜 ) * *******************************************************************************/ #box1 { top: 80px; left:-250px; width: 100px; height: 100px; background-color: orange; position: absolute; transition: transform 3s ease-in-out; -webkit-transition: -webkit-transform 3s ease-in-out; #button:hover #box1 { transform: perspective(800px) translatex(400px) translatez(100px) rotatey(120deg) scale(2.0, 2.0) skewy(10deg); -webkit-transform: perspective(800px) translatex(400px) translatez(100px) rotatey(120deg) scale(2.0, 2.0) skewy(10deg); #box2 は matrix3d 関数を使用して X 軸方向へ 400px 移動 Z 軸方向へ 100px 移動 Y 軸を時計回りに 120 度回転 幅と高さを 2 倍に拡大 Y 軸方向へ 10 度傾斜させます #box2 の位置は top: 360px; left: -250px; サイズは width: 100px; height: 100px; で 色は background-color: cyan; で指定します transition は transform プロパティを 3 秒で ease-in-out でトランジションするように記述します #button ボックス ( ボタン ) を hover した時の変化として #box1 ボックスに transform プ ロパティで次のように指定します 7
transform: perspective(800px) 0, 2.0, 0, 0, -webkit-transform: perspective(800px) 0, 2.0, 0, 0, /****************************************************************************** * matrix3d を使用する場合 (x 方向へ 400px 移動 z 方向へ 100px 移動 Y 軸を * * 時計回り 120 度回転 幅と高さ 2 倍拡大 Y 軸方向へ 10 度傾斜 ) * * matrix3d で傾斜 拡大 回転を同時に行うときは 3x3matrix の掛け算が必要 * * perspective は matrix3d での指定は難しいので matrix3d とは別に指定すると良い * *******************************************************************************/ #box2 { top: 360px; left: -250px; width: 100px; height: 100px; background-color: cyan; position: absolute; transition: transform 3s ease-in-out; -webkit-transition: -webkit-transform 3s ease-in-out; #button:hover #box2 { transform: perspective(800px) 0, 2.0, 0, 0, -webkit-transform: perspective(800px) 0, 2.0, 0, 0, #button ボックス ( ボタン ) を hover したら #button ボックスの背景色を green に変化さ せます #button:hover { background-color: green; 8
最後にボタンに表示するテキストのフォントの指定をします.font1 { color: black; font: bold 28px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; line-height: 50px; #Button を hover してみると matrix3d を使用しない場合も matrix3d を使用した場合も 同じトランジションになったでしょう ( 注意 )#box2 は matrix3d 関数を使用して Y 軸を時計回りに 120 度回転させていますが IE(Internet Explorer) ブラウザは正しく回転してくれないようです (2015 年 11 月 17 日 Windows7 IE11 にて確認済み ) 9