transformプロパティの3D変形にチャレンジ

transform:matrix3dを使った3d変形にチャレンジ
先日の記事の「CSS3のtransformプロパティを使って要素を変形する」でいくつかの変形を紹介しましたが、その記事の中の「① マトリックス変形」の中で「・3D変形:matrix3d()~()内の値は16個あるので省略」としました。

16個の数値とは、4x4の行列を指定しているのですが、つまり数学で言う行列式ですね。
チョッと背筋が寒くなる言葉ですが、勇気を出して挑戦してみたいと思います。
では省略した()内の16個の値を入力してみたいと思います。

これが3d変形させる前の画像です。
marukkoianime.PNG
この画像を3d変形してみましょう。


その前に、ちょっとお話が
4×4の16個の数値ですが、
何も変形させない場合は・・・
1 0 0 0
0 1 0 0
0 0 1 0
0 0 0 1
の16個の値の配列です。

1~4行にある1の数値は縮尺倍率で、1は1倍なので縮尺も拡大もしない。
そして、1に関して1行目はx軸、2行目はy軸、3行目はz軸の倍率です。

なので、x軸を1.2倍、y軸を1.4倍、z軸を1.8倍とする場合は
1.2 0 0 0
0 1.6 0 0
0 0 2 0
0 0 0 1
の配列になります。
縮尺率の値が大きいと画面からはみ出したりします。

さらに4行目に移動させる値を入れます。
x軸を100px、y軸を50px、z軸を25px移動させたいときは
1.2 0 0 0
0 1.6 0 0
0 0 2 0
100 50 25 1
の配列となります

ではこの値でどのような形に3d変形するか見てみましょう。


それではtransform:matrix3dを使った3d変形します
カーソルを重ねると変形します。

marukkoianime.PNG




CSSのソース
p.samplew img {}
.samplew:hover { transform:matrix3d(
1.4, 0, 0, 0, 
0, 1.6, 0, 0, 
0, 0, 2, 0, 
100, 50, 25, 1);}
この数値を、適当に色々変化させて試してみるといいと思います。

HTMLのソース
<p class="samplew img">
<a (画像のアドレス)></a></p>


アニメーションを加えてみます
折角ですので、試しに回転も加えて適当に数値を入力してみます。
カーソルを重ねると変形してアニメーションします。




marukkoianime.PNG





ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 26

なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
驚いた
ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス

この記事へのコメント