transform matrixを理解する。

〽️座標空間として考える。 〽️矢印で決定される座標空間。 〽️1マスを変形。 〽️CSSで書いてみる。 〽️使いこなすに向けて。





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

こんにちは、「ふ」です。
今回は、CSSのtransform:matrixについて説明します。

matrixについてwebサイトや書籍などを開くと、行列計算など難解な数式が出てくると思います。マスターするのを断念した方もいらっしゃるかもしれません💧

しかし。

transform:matrixを使うにあたって、行列計算の知識、必要なし
確かに変換行列を使って結果を導いているのですが、使っているのは算数における1+1=2みたいな、ごく単純なものです。
したがって行列式をわざわざ持ち出さなくても十分に理解することが可能です。

この記事では、HTML要素の領域から座標空間を考え、その最小単位の1マスに対してmatrixを発生させます。
一般のmatrixに関する文献とは異なる切り口で説明を進めていきますが、むしろこれが本来の変換方法です。

CSS transformの1つの壁とも言える、matrix。一緒に理解を深めていきましょう。

座標空間として考える。


display:matrixの概念について説明していきます。
先づ必要なのが、「要素の領域を座標空間として考える」ことです。

幅10px、高さ10pxのdiv要素があったとします。


このdiv要素が占める領域を10X10分割(1目盛りが1px)の座標空間と考えると、この⬆︎ように表現することができます。

10X10分割ということなので、「マス目」については納得できるが しかし ?
〜この時点で疑問が浮かぶ方もいるでしょう。

「なんで原点が左上にあるのか?」
それは、このdiv領域内に要素を配置してみるとわかります。

<div id = "area"> 「「1<div id = "nakami" style = "width:5px;height:5px;background-color:yellow">」」 </div>

1/4サイズのdiv要素を配置しました。
marginなどの位置情報を指定せず(デフォルトのまま)に子要素を追加すると、左寄せ上寄せに配置されます。
これは領域の左上が原点(子要素を配置した場合のデフォルトの位置)となっている証拠です。


また、X軸とy軸の方向が定義されています。
これはなんの意味があるのでしょうか?

配置した「#nakami」を移動させてみます。

■ CSS

#nakami { transform:translateX(2px); }

要素がx軸の方向へと2px移動しました。

もし方向の定義がないとしたら、たとえば今のように「移動」を指定しても、「逆方向に移動する選択肢」も発生します。
ブラウザは結果を1つに決定することができず、webに表示することができません。方向を取り決めてやることで、ブラウザの解釈を一意にしているのです。

html要素が占める領域は、

原点:左上
x軸:右方向
y軸:下方向

の座標空間として考えることができる。

矢印で決定される座標空間。


先程の10X10分割の座標空間。「たくさんの同じマスが並んでいる」とも言えますね。
ではそのうちの「1マス」の状態を考えてみます。

小数点表現を考えなかった場合、この座標空間の最小の1マスはこの⬆︎ようなものに成増。
先に述べたとおり、「方向」は必要ですよね。よって、矢印で表現しています。

また矢印は1マス分の縦横に伸びているので、その大きさは「1」です。
するってぇと。

マスの左上を原点とした場合の x、y 矢印それぞれの先端の座標( x,y )は、
( 1,0 )、( 0,1 )と表現できます。

だから何?

座標領域の1マスの状態は、大きさと向きを持った2つの矢印が作る平行四辺形で決定される、ということです。
いま「平行四辺形」と言いましたが、現在のdiv領域はデフォルト状態です。2つの矢印の大きさは共に「1」で、垂直に交わっています。結果、1マスは正方形になっています。

ちょっとびっくりですが、⬆︎こんなマス目で構成される座標空間も存在します。
「マス目」と呼んでいいのか分かんないですが。

そして逆に考えれば、「1マス」を縦横に整然と並べたものが「座標空間」を形成しているので。
1マスに定義された状態が、座標空間を決定している」とも言えます。ここがポイント。

その1マスの状態を定義しているのが、2つの矢印。
X方向の矢印が(1,0)、Y方向の矢印が(0,1)。最小単位である2つの矢印が表す座標空間は一意のものと成増。

座標空間は、最小単位(1マス)を表現する2つの矢印によって決定される。

1マスを変形。


「最小単位のマスを定義する2つの矢印」によって座標空間が決定されることがわかりました。
最初に出てきた、「 幅10px - 高さ10px 」のdiv要素に話を戻します。

#area { background-color:#ffa25c; }


見やすいよう、背景色をつけておきました。

座標空間上で考えます。
このdiv要素を「図形」と捉えたときの、各頂点の座標は、

この⬆︎ようになっています。
1マスの大きさが「1px」なので、納得いただけるかと思います。





デフォルト状態のHTML要素において、「最小矢印」の先端座標は、

X方向:(1,0) Y方向:(0,1)

でした。

今形成されている座標空間に反映されています。

矢印を変形。

扨(さて)、矢印を変形させてみましょう。
x方向の矢印をこの⬇︎ようにしてみます。

X方向:(1,「「10.5」」) Y方向:(0,1)

「最小矢印の定義」が変わりました。

すると「最小矢印によって決定される」座標空間はどのようになるのでしょうか?
従来、この⬆︎ように張り巡らされていたのが、


最小矢印の定義が変更されたため、そのまま反映されて変形しました。

変形後の座標空間において、先ほどのdiv要素の各頂点の座標はここ。

そして! div要素もそれにしたがって変形します。



この「1マスを定義している矢印を変形させることにより、座標空間全体をねじ曲げる」のが、transform:matrixの正体です。ワイヤーアクションではありません。

transform:matrixの仕組み

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

CSSで書いてみる。


transform:matrixの本質がわかったところで、お待たせしました、コードに落とし込んでいきしょう。

■ CSS

element { transform:matrix ( x矢印のx座標, 「「1‥ ①」」 x矢印のy座標, 「「1‥ ②」」 y矢印のx座標, 「「1‥ ③」」 y矢印のy座標, 「「1‥ ④」」 x方向の移動量,「「1‥ ⑤」」 x方向の移動量 「「1‥ ⑥」」 bb); }

ずいぶんと長い記述ですね💧
が、これまでの内容を理解していればスムーズに記述することができます。

X方向:(「「1①」」,「「1②」」) Y方向:(「「1③」」,「「1④」」)

値のうち①〜④については、これまで何度もみてきた「最小矢印」の先端座標がそのまま入ります。

⑤と⑥はそれぞれ、x方向とy方向への移動を指定します。
「座標値」なので「px」や「%」などの単位を入力することはできません。数値のみです。


ではその移動における「座標値」は何を指しているのか? それは、親要素の座標空間です。

画像⬆︎は変形した子要素の座標空間を、親要素座標のx方向に「3」移動させた様子です。
ややこしくなってきましたね💧

でも安心してください。

通常のhtml要素の場合、親要素がマトリクスしていなければ、親座標の1目盛りは初期状態の「1px」です。例えばy方向に「20」と指定すると、子要素がy方向に「20px」移動した結果が得られます。

transform:matrixの初期値はこのようになっています。

#sample { transform:matrix(1,0,0,1,0,0); }


単位座標も変形せず、移動もなしの初期状態です。
次は変形させてみます。

#sample { transform:matrix(1,「「10.5」」,0,1,0,0); }


x矢印を傾けました。
さらに移動させましょう。

#sample { transform:matrix(1,0.5,0,1,「「1100,100」」); }


親座標のx、y方向に100pxずつ移動させました。

実際にコードを書いて試してみると、感触がつかめてきます。
みなさんも簡単な要素で構わないので、マトリクスさせて実験してみてください。

使いこなすに向けて。


最後までお読みくださり、ありがとうございました。
もうお気づきと思いますが、1マスを表現する「向きと大きさを持った矢印」は「ベクトル」と呼ばれるものです。数学が苦手な人もいらっしゃるといけないと思い、あえて「矢印」と表現させてもらいました(笑)

今回はtransform:matrix、仕組み自体の説明に長くなってしまったので、このあたりで記事を終えたいと思います。
実際にmatrixを思い通りに使いこなすにあたっては、transform-origin(変形の基準)にも配慮する必要が出てきます。また、SVG要素のmatrixは標準のhtml要素とは違った動きをします。
それら「実用にあたって配慮すべきこと」についてもいずれ紹介したいと思っています。

今回の内容、いかがでしたか? matrixをマスターして、楽しい変形や、さらにアニメーションに挑んでいきましょう。ではまた〜 ♬



SVGアニメーション、 回転の中心を指定する。

2021.03.09
座標を取得して%変換。


SVG アニメーション、カメラのシャッターを再現。

2021.04.11
「アニメーションごと」重ねていく。


ページめくりアニメーション 作り方。

2021.02.02
画像を読み込むだけで実装。












「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。