フーノページTOP

Vectorator使い方TOP

SVGアニメーションTOP

WEBサイト作り方TOP

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

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

CSSアニメーション、transformについて。

〽️なぜtransformなのか？。 〽️transform、４つの値。 〽️transform-origin。 〽️複数指定について。 〽️やりたいことは浮かんできたかな？

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

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

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

なぜtransformなのか？。

はじめに、「なぜtransformなのか？」についてお話しします。
というのも、

transformには例えば、拡大縮小を行う「scale」という値があります。
でもこれって、わざわざ「変形」をつかうまでもなく、widthやheightを変更すればいい話なのでは？と思うかもしれません。

しかし、むやみにwidthやheightを動かすのはよろしくありません。

3Dの概念を使っていない、通常のHTMLページの場合。
全ての要素は「１つの平面上に並べられている」状態です。

そして、それぞれの要素は初期値または指定されたmarginなどの余白にしたがって配置されています。

したがってある要素の大きさや余白を変化させると、隣接する要素は決められた余白を厳守すべく、上下に移動せざるを得ません。以降の要素もそれに続いて動かされます。

結果、ページ全体のレイアウトが崩れてしまうこともあるでしょう。

〜transformには、この問題を解決する性質を持ち合わせています。

transformの初期値以外を与えられた要素は、ページ本体とは別の、もう１つ新しく作られた平面に置かれたような状態に成増。

その結果、隣接する要素のレイアウトに影響を与えることなく変形させることができます。

これがtransfromの便利なところです。

transform、４つの値。

transformの代表的な値（関数）を紹介していきます。
ベースとして、⬇︎のようなCSSアニメーションを用意しました。キーフレームにはtransformの初期値「none」を指定しておき、この部分を書き換えていきます。
現在は「none」なので変形は起こりません。

#sample { animation:henkei 2s alternate inifinite; } @keyframes henkei { to { 「「４transform:none;」」 } }

当コーナー（CSSアニメーション作り方）では、キーフレームアニメーションのコードはちょっと久しぶりですね、覚えていますか？ ふふふ。

　■ rotate（回転）。

transform:rotate(90deg);

rotate

１つめ。「rotate」は、回転を与えます。
角度も自由に指定することができ、サンプル⬆︎では90°にしています。

　■ translate（移動）。

transform:translate(50%);

traslate

「translate」は移動のコマンドで、水平/垂直方向、また前後「Z方向」に移動させることもできます。
サンプル⬆︎はx方向に50%分移動させています。

　■ scale（拡大縮小）。

transform:scale(4);

scale

「scale」は拡大縮小です。
サンプル⬆︎は４倍に拡大しています。transformを使えば、隣接する要素にレイアウト上の影響を与えません。

　■ skew（傾斜）。

transform:skewX(60deg);

skew

「skew」は要素全体に傾きを与えます。
X/Y方向または両方に傾斜させることができます。サンプル⬆︎では「X方向に60°」と指定したもの。

transform-origin。

CSSのtransformを扱う上で重要になってくるのが、「transform-origin」というプロパティです。
これは、「変形の基準点」を指定するものであり、その位置によってCSSアニメーションの結果が変わってきます。

center

transform-originの初期値は「center」で、要素の中心に指定されています。
この⬆︎要素を回転させてみましょう。

#sample { animation:center 2s linear infinite; } @keyframes center ｛ bbto { transform:rotate(1turn); } ｝

center

transform-originの指定なしの状態なので、初期値の「center」が採用されています。実際、中心を基準に回転していますね。
値の「1turn」というのは「１回転」という意味です。こういった指定の仕方も可能です。

それでは「変形の基準点」を要素の右端にしてみましょう。

#sample { 「「１transform-origin:right;」」 animation:center 2s linear infinite; } @keyframes center ｛ bbto { transform:rotate(1turn); } ｝

right

要素の右端を基準に回転するようになりました。
このように、transform-originの指定によっては結果が大きく異なってきます。

複数指定について。

multi

transformの基本的な変形は、回転・移動・拡大縮小・傾斜ですが、実際にはこれらを組み合わせたCSSアニメーションを実装するケースが多いです。
その際には以下のように、

transform:translate(150%) rotate(180deg);

１つのtransformプロパティに、変形の内容を半角スペースで区切って記述します。

multi

要素が回転しながら右へと移動する、CSSアニメーションができました。

ちなみに。
transformの値を複数列挙した場合は、後に書いた内容から「前提とした動き」として採用されます。今のコードでは、

transform:translate(150%) 「「４rotate(180deg)」」;

と、rotate（回転）の動きを後ろに書きました。
したがって、「回転している状態が、移動（translate）する」という動きになっています。
回転と移動の書き順を変えてみましょう。

tranform:「「４rotate(180deg)」」 translate(150%);

multi

記述順をひっくり返した結果です。
「移動（translate）している状態が、回転（rotate）する」という不思議なCSSアニメーションになっています。

結果を安易に想像しにくい時もありますが、transformの内容を複数組み合わせるときには、書き順の影響に配慮するようにしましょう。

やりたいことは浮かんできたかな？

最後までお読みくださり、ありがとうございました。
今回はCSSのtransform「概要編」。実装するにあたって学習すべきこと、それらを駆け足で紹介してきました。作ってみたいCSSアニメーションのアイデアは浮かんできたでしょうか？ ふふふ。

今後は各内容について、もっと踏み込んだ記事を順次アップしていきます。transformを詳しく学んで、すごいCSSアニメーションを作りましょう！
ではまた〜 ♪