tochio

CSS3のtransformプロパティで要素を変化させる(2D):初歩の初歩

前回はCSSアニメーションの「animation」と「transition」についてまとめましたが、今回は、要素を変形させる「transform」について。
前回記事→CSS3でアニメーション:初歩の初歩

transformプロパティ

■rorate

要素の回転

  • rotate():X軸・Y軸の両方を指定できる。回転する角度を、0°~360°で指定。マイナスの値も指定できる。
  • rotateX():X軸を中心に回転
  • rotateY():Y軸を中心に回転
■scale

要素の拡大・縮小

  • scale():X軸・Y軸の両方を指定できる。拡大・縮小する数値を指定。マイナスの値も指定できる。
  • scaleX():X軸の拡大・縮小
  • scaleY():Y軸の拡大・縮小
■skew

要素を傾斜変形させる

  • skew():X軸・Y軸の両方を指定できる。傾斜する角度を、0°~360°で指定。マイナスの値も指定できる。
  • skewX():X軸の傾斜変形
  • skewY():Y軸の傾斜変形
■translate

要素の移動

  • translate():X軸・Y軸の両方を指定できる。移動する距離をpxで指定。マイナスの値も指定できる。
  • translateX():X軸の移動
  • translateY():Y軸の移動

仕様の詳細は、以下でご確認ください。
transform - CSS | MDN

注意点

ひとつの要素に対して複数のプロパティを記述する場合、各プロパティの記述順によって、表示が異なる場合もあります。
以下は、どちらも「要素をX軸方向に50px・Y軸方向に-40px移動、1.2倍に拡大、X軸方向に-45°傾斜」しようとしたときの表示ですが、要素が表示される位置がちょっと違います。

See the Pen example02/03 by Hiromi Tochio (@tam-tochio) on CodePen.

これは、example01は「移動→拡大→傾斜」、example02は「傾斜→拡大→移動」の順に処理されるためです。
example01は、「X軸方向に50px・Y軸方向に-40px移動」したあとで「1.2倍に拡大」され、「X軸方向に-45°傾斜」、example02は、「X軸方向に-45°傾斜」した要素が「1.2倍に拡大」され、移動距離もこの1.2倍の拡大が適用されて、「要素をX軸方向に60px(50px×1.2)・Y軸方向に-48px(-40px×1.2)移動」することになります。
想定どおりの表示にならないときは、プロパティの記述順を見直してみるといいでしょう。
上述のとおり、「skew(拡大)」は、「translate(移動)」の移動距離に影響するので、「translate(移動)」の前に記述しないようにすると安全かもしれません。

transform-originプロパティ

transformで適用される変形の基準点は、初期値では要素の中心(50%, 50%)となっていますが、transform-originを指定することで、任意の位置に基準点を設定できます。
以下は、どちらも「時計回りに45°回転」させていますが、ひとつはtransform-originがデフォルト(50%, 50%)、ひとつは「top left」を設定しています。

See the Pen example03/04 by Hiromi Tochio (@tam-tochio) on CodePen.

仕様の詳細は、以下でご確認ください。
transform-origin - CSS | MDN

transform/animation/transitionを使用した動きの実装例

今回の「transform」と、前回の記事で書いた「animation」や「transition」と組みあわせると、簡単に要素に動きをつけることができます。

マウスオーバー時にふわっと大きくなるボタン

See the Pen btn01 by Hiromi Tochio (@tam-tochio) on CodePen.

マウスオーバー時に1回転するボタン

See the Pen btn02 by Hiromi Tochio (@tam-tochio) on CodePen.

今回は1回転だけなのでrotateの値を360としていますが、「360×回転させたい回数」と設定すれば、何回転でもできます。

「NEW!」の文字が一文字ずつ飛び跳ねる

See the Pen move text by Hiromi Tochio (@tam-tochio) on CodePen.

テキストを一文字ずつ分解する部分のjsは、こちらを参考にしました。
jQueryで文章などのテキストに対して一文字ずつ個別に装飾を変える実験 | BlackFlag

ベンダープレフィックスの要不要について

IE9、iOS Safari8.4、Android 4.4.4以前のバージョンに搭載されているAndroid Browserでは、ベンダープレフィックスが必要です。(2016年5月現在)
ターゲットブラウザによって、ベンダープレフィックスを使うか使わないか判断すればいいでしょう。

参考サイト

お問い合わせはこちら