フーノページTOP

Vectorator使い方TOP

SVGアニメーションTOP

WEBサイト作り方TOP

「ふ」のtwitter。記事を更新するとつぶやきます。

コメント・お問い合わせはこちら。

transform matrixの使い方 ①。

〽️拡大/縮小。 〽️移動。 〽️回転。 〽️skew。 〽️今回はここまで。

• SVGアニメーション、作り方。
  

  2020.06.30
  静的コンテンツの枠を飛び出す。

• CSSアニメーション、作り方。
  

  2021.04.17
  webアニメーションを１から学ぼう♪

⬆︎SVGついてのまとめページ、CSSアニメーションの基本コーナーはこちら。

拡大/縮小。

前回紹介したtransform:matrixの仕組みは以下のようなものでした。

transform:matrixの仕組み

　① 最小単位の矢印を定義⬇︎
　② 座標空間が変形⬇︎
　③ 座標上のポイントが動くため、要素も変形する。

座標を変換することによって、要素を拡大してみます。

現在はデフォルト。
座標空間を決定しているx矢印とy矢印は、このようになっています。

要素自体も、定義された座標空間に基づいて描画されています。

矢印の大きさを変えてみましょう。
x矢印もy矢印も、方向は同じまま1.5倍の大きさにしてみます。

#element { transform:matrix(1.5,0,0,1.5,0,0); }

最小の「１マス」を決定している、x矢印とy矢印の大きさがそれぞれ1.5倍になりました。
したがって座標空間の「１マス」も縦横1.5倍に成増。

要素が占める領域を「長方形」と考えたとき、各頂点の座標はそのまま新しい座標空間にしたがって描画されます。
結果、要素全体が拡大されます。

もちろん縦横比を固定せずに拡大/縮小が可能です。
x矢印だけを半分の大きさにしてみました。

そのまま座標空間に反映され、幅だけが半分に縮小されました。

移動。

#element { transform:matrix(1,0,0,1,「「１x方向」」,「「１y方向」」) }

「移動」は、matrix（...）の５つ目と６つ目の値に指定します。

この変形は、要素が自身を取り巻く座標空間内を移動する、ということではありません。

matrixでの移動は、自身の座標空間ごと「ズズっ」と動きます。つまり「親要素に対して移動する」ということですね。

#sample1

#sample2

移動には数値を入力しますが、その基準は「親要素の座標空間」と成増。
２つのサンプル⬆︎を用意しました。実験してみましょう。

#sample1 { transform-origin:left; transform:matrix(1.3,0,0,1.3,「「４100,0」」); } #sample2 { transform-origin:left; transform:matrix(1,0,0,1,「「４100,0」」); }

変形の基準（transform-origin）は「left」としています。

sample1は、自身の座標１マスの大きさを縦横1.3倍に拡大し、その上でx方向「100」の移動を指定しました。
sample2は拡大縮小せずにx方向に「100」の移動。

#sample1

#sample2

親要素はデフォルトの場合、１マスの大きさが1pxの座標空間を持っています。移動のX成分に「100」を指定したので、x方向に100px移動しました。
sample1は自身の座標系が拡大されているのですが、移動距離はsample２と同じになりました。このことからも、「親要素の座標空間を基準に移動している」ことが確認できます。

回転。

matrixを使って要素を回転させる場合。
x矢印とy矢印の角度を90°に保ったまま、回転先の座標を指定します。

単位矢印を、時計回りに90°回転させてみます。

単位矢印回転後の座標は⬆︎このように。

サンプルに対して、時計回り90°のmatrixを掛けてみます。

#element { transform:matrix(「「１0,1,-1,0」」,0,0); }

時計回りに90°回転させることができました。

■ (1,1)だと拡大されてしまう。

90°回転はうまくいきました。では他の角度・・例えば時計回り45°を試してみます。

とこのとき、この⬆︎ようにしてしまいがちです。
結果はどうなるのでしょうか。

#element { transform:matrix(「「４1,1,-1,1,」」0,0); }

むむ。
回転するにはするのですが、なんだかデカくなってしまいました。

矢印の先端座標を（1,1）とすると「向き」は正しいのですが、「矢印の大きさ」、つまり座標１マスの大きさが変化してしまっているのです。

「拡大/縮小せずに時計回り0〜90°」の回転であれば、角度θに対してこの⬆︎ように指定する必要があります。さらに回転角度90°を超えると三角関数の置き方も変わります。
とてもめんどくさい💧

#element { transform:「「１rotate(45deg)」」; }

単に回転させたいのであれば、「transform : rotate」を使用したほうが楽チンですね。

skew。

skewは「斜めにする、傾斜」という意味です。
transformにはskew専用の「transform:skew( )」というものがありますが、今回はmatrixで行ってみます。

x矢印を⬆︎のように傾斜させてみます。

#element { transform:matrix(「「１1,0.5,」」0,1,0,0) }

単位座標を指定したことで座標全体が傾斜し、要素の領域もそれに伴って変形します。

y矢印の大きさと方向も変えてみます。

#element { transform:matrix(「「１1,0.5,-0.5,0.5」」,0,0) }

x,y成分ともに傾斜しました。
2.5Dっぽくなりましたね。

ではこの⬆︎ように２つの矢印が平行になるとどうなるのでしょうか？

「１マス」が完全に潰れてしまうので、要素は非表示になってしまいます。
ちなみに⬆︎のアニメーションにはギリギリ平行ではない、

transform:matrix(1,0,-1,「「１0.01」」,0,0);

をキーフレームに指定しています。

「「４✖️アニメイションが無効になる」」 #element { transform:matrix(「「４1,0,-1,0」」,0,0) }

x、y矢印を完全な平行状態に指定すると、アニメーションしてくれませんでした。

今回はここまで。

最後までお読みくださり、ありがとうございました。
今回はtransform:matrixの使い方前編ということで、何種類かの変形を試してみました。
その種類によってはmatrixを使うと便利なものと、逆に複雑になってしまうものもありましたね。「回転」なんかがそうでした。

次回はもう少し複雑な「反射」やtransform-originの影響など、さらに実戦向きな内容を紹介したいと思います。調査が完了しだい、記事をリリースします。
それまで皆さんのほうでも色々実験しておいてくださいね。ではまた〜 ♩♩