フーノページTOP

Vectorator使い方TOP

SVGアニメーションTOP

WEBサイト作り方TOP

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

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

transform matrixの
使い方②〜要素の反転と基準点について。

〽️反転。 〽️transform-originによる影響。 〽️実例。 〽️１行で実装。

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

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

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

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

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

反転。

特殊な変形である「反転」について紹介します。

HTML要素。テキストや画像、角丸長方形など見た目はさまざまですが、
「各要素の領域」は全て長方形で表すことができます。

デフォルトで要素に与えられている座標空間は、「１目盛り = 1px」となっています。
もし要素の領域が幅10px,高さ10pxの長方形だったとすると、各頂点の座標はこの⬆︎ように。

座標空間を決定している単位矢印をmatrixの初期値で表すと、

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

でしたね。

ここで座標定義している矢印のうち、x矢印を逆方向に向けてみます。

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

単位矢印によって変換されたあとの座標空間において、先程の頂点の座標は⬆︎に示す位置に移動しました。

座標空間は変換されたのですが、要素領域の頂点座標の値は変更されていません。
要素は、新しく作られた座標空間のポイントに沿って描画されます。結果、水平方向に反転するかたちになりました。

垂直方向にも反転させてみましょう。
今度はy矢印の「1」をマイナスにします。

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

垂直方向に反転しました。

　■ 両方向に反転は？

調子に乗って、垂直/水平の両方向に反転させてみましょう。
単位矢印、両方の「1」を「-1」にすればいいのでしょうか？
実行してみましょう。

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

結果です⬆︎。
ん？単に180°回転しただけのような・・

単位矢印で見てみましょう。

なるほど。
x矢印とy矢印の両方を反転させると、２つの矢印の関係は元通りになってしまうんですね。ゆえに「ただの回転」になったのです。

ではこんな⬆︎のはどうでしょうか。
x矢印とy矢印の立場を入れ替えてみます。

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

不思議な「反転感」になってくれました。

違和感の正体。

水平方向の反転をアニメーションさせてみたのですが。
これを見ると「違和感」がうまれます。

...要素がその場で反転しているということに。

「座標空間の原点は⭕️の場所なので、左側へと移動するはずなのでは？」と思った方もいるでしょう。

要素がその場で反転したのは、transform-origin（変形の基準）がデフォルトの「center」になっているからです。
次のセクションで詳しく紹介します。

transform-originによる影響。

transform-originは変形の基準位置を指定するプロパティです。
画像⬆︎は同じキーフレームによる回転アニメーションですが、基準点（●）が要素の左側にあるものと、中心にあるものでは結果が異なってきます。

transform-originはmatrix（座標変換）にも適用されます。
matrixにおいて「基準を指定する」とは、どのような状態になるのでしょうか？

座標変換の際、transform-originに指定されたポイントの領域内位置は変わりません。

これにmatrixを施すと、「origin」の位置を動かさない状態で座標を変形させます。
このtransform-originの指定は強力。最優先されるため、座標の原点も移動してしまいます。

先のセクションで試したアニメーションはtransform-originがデフォルトの「center」であったため、要素の中心位置を変えずに座標変換が行われました。
その結果、「その場で反転している」状態になったのです。

実例。

#sample { animation:sample 2s alternate infinite; } @keyframes sample ｛ bbto { 「「１transform:matrix(-1,0,0,1,0,0);」」 bb} ｝

さきほどの水平方向への反転、アニメーションのコードがこちら⬆︎です。

transform-originを移動させてみましょう。

#sample { animation:sample 2s alternate infinite; 「「１transform-origin:left top;」」 }

transform-originを要素領域の左上、つまり原点に持ってきました。
これで実行すると、

原点を基準にmatrixするように。
水平反転だけでは単純なので、もっとやってみます。

はじめのセクションでやった、x矢印とy矢印の立場入れ替え。
なおかつ、単位矢印の向きを反転。 transform-originは左上（原点）のまま、実装してみます。

@keyframes sample ｛ bbto { 「「１transform:matrix(0,-1,-1,0,0,0);」」 bb} ｝

激しい「反転」になりましたね笑

さらに、反転時は縮小させてみましょう。

@keyframes sample ｛ bbto { transform:matrix(0,「「１-0.1,-0.1,」」0,0,0); bb} ｝

縮小と反転を合わせると、遠近感も出てきました。
みなさんも、楽しいので色々とやってみてください。

１行で実装。

最後までお読みくださり、ありがとうございました。
今回扱った「反転」は、transform:rotate（回転）を使っても実装することができます。ただしここにスケール変化や他の変形要素が加わってきた場合、scale（拡大縮小）など他の関数も組み合わせる必要が出てきます。

　 一方matrixを使えば、コード１行で全ての変形を組み合わせて実装することが可能です。
特に「反転」に関しては座標変換で行ったほうが直感的かと思います。使いやすいほうでコーディングしてください。

扨（さて）３回に渡ってtransform:matrixについて解説してきました。理解を深めることができたでしょうか？
３記事の内容を把握すれば、HTML要素に関してのmatrixはマスターできたと言えます。
あとは、SVG要素のmatrix。SVGに含まれる描画要素は、HTML要素と違う特性を持っています。これについても近々紹介する予定なので、一緒に学習していきましょう。
ではまた〜 ♬♬