フーノページTOP

Vectorator使い方TOP

SVGアニメーションTOP

WEBサイト作り方TOP

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

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

CSSアニメーション、
変形の基準を指定〜transform-origin。

〽️基本サンプル。 〽️キーワードによる指定。 〽️%での指定。 〽️通常サイズでの指定。 〽️変形の基準とは？

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

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

⬆︎CSSアニメーションについてのまとめページはこちら。

基本サンプル。

今回はrotate（回転）するCSSアニメーションをサンプルとし、実験していきましょう。

<div id = "sample"></div>

#sample { width:8em; height:8em; background-color:#00a0e9; margin:0 auto; 「「１animation:sample 2s linear infinite;」」 } @keyframes sample ｛ bbto { 「「１transform:rotate(1turn);」」 } bb｝

要素が2s掛けて１回転（1turn）するCSSアニメーション。
transform-originの初期値はx、y方向ともに「center（中心）」です。 したがって現在、要素は中心を基準に回転しています。

あえて記述するなら、

「「１transform-origin:center;」」

と成増。

キーワードによる指定。

それでは実際にtransform-originの値を変更してみましょう。

transform-originの最も簡単な記述は、キーワードによる指定です。

キーワードは水平方向/垂直方向それぞれに３種類。

・ 水平方向：
left（左端）/center（中央）/right（右端）

・ 垂直方向：
top（上端）/center（中央）/bottom（下端）

水平/垂直方向、２つのキーワード条件を満たした場所が、最終的なtransform-originの位置と成増。
たとえば、「水平方向：左端、垂直方向：上端」とすると、そこから決定されるoriginの位置は要素の左上ですね。


CSS内には、２つの値を半角スペースで区切って記述します。

#sample { transform-origin:「「１left top」」; }

これをサンプルアニメーションに取り入れてみましょう。

#sample { 「「３/*形状などの指定は省略します*/」」 「「１transform-origin:left top;」」 animation:sample 2s linear infinite; } @keyframes saple ｛ bbto { transform:rotate(1turn); } bb｝

要素左上を基準に回転するようになりました。

水平/垂直成分のうち、一方はデフォルトの「center」で差し支えない場合、省略することができます。

水平方向は右端にしたいが、垂直方向は中央のままで良いとき。

transform-origin:「「１right」」;

垂直方向については記述がないので「center」とみなされ、transform-originは「right center」としてアニメーションします。

では「center」は水平/垂直共通のキーワードですが、これを１つしか記述しない場合、どう解釈されるのでしょうか？

transform-origin:「「１center」」;

「center」を１つだけ記述すると、「水平方向の指定」とみなされます。垂直方向については記述がない、ということになり、初期値の「center」が適用されます。

結果、transform-originは水平/垂直方向ともに中央に成増。

%での指定。

次に紹介するのは、「%」による指定方法です。
これについても水平/垂直方向の２つから最終的なoriginの位置を決定します。

「要素のどこが何％となるのか？」ですが、⬆︎のように、

・ 水平方向：
左端（left）が０％、右端（right）が100%。

・ 垂直方向：
上端（top）が0%、下端（bottom）が100%。

となっています。要素の左上が水平/垂直とともに「0%」です。

transform-originの初期値を「%」形式で表すとすると、

transform-origin:「「１50% 50%」」;

ですね。
値はキーワードの時と同じく水平/垂直の値を半角スペースで区切って指定します。

%指定でtransform-originを移動させてみましょう。

transform-origin:「「１25% 75%」」;

%指定では先に記述された値が水平方向に適用されます。
２つの値の記述順を逆にしてみます。

transform-origin:「「１75% 25%」」；

「水平：75%、垂直：25%」として適用されました。

　■ 外側にも指定できる。

％指定、これだけならキーワード指定の詳細度が上がっただけに思えます。
が、％指定の利点は、transform-originを要素の外側にも指定できるというところです。

画像の位置⬆︎にtransform-originを動かしてみましょう。

transform-origin:「「１-50% 0%」」;

要素の外側を基準点に取ることができました。
％指定では、100%以上やマイナスの値も指定することができます。

　■ 併用と省略。

transform-originの水平/垂直の値は形式を統一する必要はありません。例えば、

transform-origin:「「１100% bottom」」;

「キーワードと％指定」といった、別形式の値を組み合わせることができます。

こんどはキーワード指定のときのように、%指定で値を１つしか記述しない場合、どのようになるのか。

transform-origin:「「１150%」」;

%値を１つしか記述しなかった場合には、「水平方向の値」とみなされ、垂直方向は初期値の50%（center）が適用されます。

通常サイズでの指定。

これまで述べてきたキーワードや%指定のほか、transform-originには通常の要素サイズを表す「px」「cm」などの絶対値で指定することも可能です。

transform-origin:「「１100px　200px;」」

pxベースでページレイアウトを組んでいる場合には、精度の高いCSSアニメーションを実装できるでしょう。 そのほかにも、

transform-origin:4em 50vw;

と、他の要素サイズを元にした相対値も使うことができます。しかしレスポンシブなご時世。細かな場合分けと対応が必要になってきます。
あまり有効な手段とは言えません。

transform-origin、通常の要素サイズを使うこともできますが、その使い所は限られてくるでしょう。
キーワードもしくは％で指定するのが一般的です。

変形の基準とは？

最後までお読みくださり、ありがとうございました。
今回はtransform-origin（変形の基準）について紹介してきました。

ところで、「回転の基準」と言うとなんとなく「中心のことかな・・」と想像できますが、そもそも「変形の基準」というのは何を意味するのでしょうか？

変形の基準というのは、「変形のときに動かない場所」のことです。CSSのtransformには回転のほかにも何種類かの変形が存在しますが、transform-origin〜変形の基準点に指定された場所は変形前後でその位置を変えることはありません。

「変形の基準の定義」。これは皆さんが将来、高度なCSSアニメーションに挑戦する際に必要な考え方です。すこしだけ覚えておいてください。

扨（さて）次回からは各種変形関数について、その内容を詳しく学んでいきましょう。そして今回のtransform-originと絡めて、すごいCSSアニメーションを作成してください！ ではまた〜 ♪♪