Transform(変形) プロパティ

transformプロパティを使うことで、要素に対して移動、回転、伸縮、傾斜の変形を加えるてアニメーションさせることができます

ボタンにマウスカーソルを乗せたときに、移動したり、大きさを変えたりするのに使われるプロパティです

jQueryやJavaScriptを使って似たようなことができますが、transform3d は、CPU ではなく GPU を使用しているので、CSSを使う方がヌルヌル動きます CPU と GPU とは?

※jQUery ver 3 では、アニメーションに requestAnimationFrame を使用するようになりましたので、jQuery でも同様にヌルヌルを動くようになりました。


ブラウザの対応状況を考慮して、ベンダープレフィックス「-webkit-」をつけておく方が無難です


transform プロパティ は、よく transition(トランジション)というプロパティと一緒に使うことがあります

transition プロパティ とは変化するまでの時間を設定するプロパティです

Transition(変化) プロパティ

ボタンにマウスカーソルを乗せたときに、色や大きさなどが変わる時間を設定するときに使われるプロパティです

この transitionプロパティ と一緒に transform(トランスフォーム)という変形(移動・回転・伸縮・傾斜)に関するプロパティが一緒に使われます

transform(変形) プロパティ について

transform(トランスフォーム)は、直訳すると変形という意味です

変形には移動、回転、伸縮、傾斜の4つがあります

transform プロパティ の値に関数を指定することで、移動、回転、伸縮、傾斜の設定ができます

移動、回転、伸縮は、3D(XYZ方向)による指定ができます

transformプロパティの値に指定できる関数は下記になります

transformプロパティの値に指定できる関数
No 関数 読み方 変形効果 2D(XY方向) 3D(XYZ方向) サンプル
01 translate トランスレイト 移動
02 rotate ローテート 回転
03 scale スケール 伸縮
04 skew スキュー 傾斜 -

transformプロパティの値に関数を指定することで、変形の設定ができます

移動や回転など複数指定するときは、記述の仕方に注意する必要があります

記述の仕方について

transformはプロパティですので、複数記述すると最後のtransformプロパティのみ反映されます

例えば、移動と回転を指定するときは、transformプロパティを複数記述せずに、値に続けて記述してください

値に複数記述するときは、半角スペースを空けて続けて記述してください

正しい記述

            セレクタ名 {
               transform:translateX(20px) translateY(20px) rotate(40deg);
            }

誤った記述

            セレクタ名 {
               transform:translateX(20px);
               transform:translateY(20px);
               transform:rotate(40deg);
            }

同じプロパティを複数記述したときは、上書きされるため、最後に記載した rotate(40deg) のみ反映されます


値に記述する順番も重要で、記述順に変形します

例えば、値に「移動・回転・伸縮・傾斜」の順番に指定したときと、逆に「傾斜・伸縮・回転・移動」の順番で指定したときは実行結果が異なる場合があります

一覧表に戻る

translate 関数(移動)

translateで、移動の指定ができます

2D(XY方向)または3D(XYZ方向)の指定が可能です

translate() 関数でX軸とY軸の移動をまとめて指定できます

translateX() 関数、translateY() 関数、translateZ() 関数を使って個別に移動距離を指定することもできます

それぞれを続けて記述することで2D(XY方向)または3D(XYZ方向)の指定が可能ですが、3D(XYZ方向)をまとめて指定できるtranslate3d()関数があります

単位は px で指定します

▶translate() 関数の記述

      セレクタ名 {
            -webkit-transform:translate(X軸方向の移動距離,Y軸方向の移動距離);
            transform:translate(X軸方向の移動距離,Y軸方向の移動距離);
      }
transform : translate(100px,100px);

▶translateX() 関数の記述

      セレクタ名 {
            -webkit-transform:translateX(X軸方向の移動距離);
            transform:translateX(X軸方向の移動距離);
      }
transform : translateX(300px);

▶translateY() 関数の記述

      セレクタ名 {
            -webkit-transform:translateY(Y軸方向の移動距離);
            transform:translateY(Y軸方向の移動距離);
      }
transform : translateY(300px);

一覧表に戻る

rotate 関数(回転)

rotate()関数で、回転の指定ができます

rotate()関数は、要素の回転を指定します

rotateX()関数、rotateY()関数、rotateZ()関数を使ってそれぞれの方向に対して回転を指定することもできます

それぞれを続けて記述することで2D(XY方向)または3D(XYZ方向)の指定が可能です

回転軸を3D(XYZ方向)で指定し、回転角度を指定できるrotate3d()関数があります


値には、回転角度を指定します

回転させる角度は、degで表します

deg は degree(ディグリー)の略で、円周を360分とした角度を表す単位です

例えば、90度回転させたいときは90degと指定します

正数だと時計回りで回転し、負数だと反時計回りに回転します

▶rotate() 関数の記述

      セレクタ名 {
            -webkit-transform:rotate(回転角度);
            transform:rotate(回転角度);
      }
transform : rotate(360deg);

transform : rotate(-360deg);

▶rotateX() 関数の記述

      セレクタ名 {
            -webkit-transform:rotateX(回転角度);
            transform:rotateX(回転角度);
      }
transform : rotateX(520deg);

▶rotateY() 関数の記述

      セレクタ名 {
            -webkit-transform:rotateY(回転角度);
            transform:rotateY(回転角度);
      }
transform : rotateY(520deg);

一覧表に戻る

scale 関数(伸縮)

scale()関数で、伸縮の指定ができます

2D(XY方向)または3D(XYZ方向)の指定が可能です

scale()関数でX軸とY軸の伸縮率をまとめて指定できます

scaleX()関数、scaleY()関数、scaleZ()関数を使って個別に伸縮率を指定することもできます

それぞれを続けて記述することで2D(XY方向)または3D(XYZ方向)の指定が可能ですが、3D(XYZ方向)をまとめて指定できるscale3d()関数があります

値は数値のみで指定します

数値は、1を基準に伸縮する比率を整数または少数で指定します

▶scale() 関数の記述

      セレクタ名 {
            -webkit-transform:scale(数値,数値);
            transform:scale(数値,数値);
      }
transform : scale(3,3);

▶scaleX() 関数の記述

      セレクタ名 {
            -webkit-transform:scaleX(数値);
            transform:scaleX(数値);
      }
transform : scaleX(3);

▶scaleY() 関数の記述

      セレクタ名 {
            -webkit-transform:scaleY(数値);
            transform:scaleY(数値);
      }
transform : scaleY(10);

一覧表に戻る

skew 関数(傾斜)

skew()関数で、傾斜の指定ができます

2D(XY方向)のみ指定できます

skew()関数でX軸とY軸の傾斜角度をまとめて指定できます

skewX()関数、skewY()関数を使って個別に傾斜角度を指定することもできます


傾斜角度の単位はdegで指定します

▶skew() 関数の記述

      セレクタ名 {
            -webkit-transform:skew(X軸の傾斜角度,Y軸の傾斜角度);
            transform:skew(X軸の傾斜角度,Y軸の傾斜角度);
      }
transform : skew(45deg,45deg);

▶skewX() 関数の記述

      セレクタ名 {
            -webkit-transform:skewX(X軸の傾斜角度);
            transform:skewX(X軸の傾斜角度);
      }
transform : skewX(45deg);

▶skewY() 関数の記述

      セレクタ名 {
            -webkit-transform:skewY(Y軸の傾斜角度);
            transform:skewY(Y軸の傾斜角度);
      }
transform : skewY(45deg);

一覧表に戻る

transform-origin プロパティ について

transform-origin(トランスフォーム・オリジン)プロパティは、要素の基点を指定するプロパティです

初期値は2Dの場合は 50% 50% で、3Dの場合は 50% 50% 0 で要素の中心になります

transform-originプロパティ を指定しないと、初期値が基点になります

transform-originプロパティ の値には基点となるX軸とY軸の位置を指定します

値には、単位付き数値またはワード(left center right top center bottom)で指定してください


平行移動を行う traslate()関数 のように相対的な移動のみを行う場合は変形の基点は関係しませんが、例えば回転を行う rotate()関数 では、変形の基点が回転の中心点になるため、変形の基点の位置によって結果は変わってきます

▶rotate() 関数の場合

      セレクタ名 {
            -webkit-transform:transform-origin: X軸の位置 Y軸の位置;
            transform-origin: X軸の位置 Y軸の位置;
      }
transform-origin : center top;
transform : rotateX(180deg);

transform-origin : center bottom;
transform : rotateX(180deg);


transform-origin : left center;
transform : rotateY(180deg);

transform-origin : right center;
transform : rotateY(180deg);

▶scale() 関数の場合

      セレクタ名 {
            -webkit-transform:transform-origin: X軸の位置 Y軸の位置;
            transform-origin: X軸の位置 Y軸の位置;
      }
transform-origin : center center;
transform : scale(3,3);

transform-origin : left top;
transform : rotateX(180deg);

一覧表に戻る

Transition(変化) プロパティ について

transition(トランジション) は、直訳すると変化や移り変わりという意味です

変化するまでの時間を設定するプロパティです

transition は、ショートハンドプロパティを含め5つのプロパティがあります

ショートハンドプロパティの transition で一括て指定することも出来るし、それぞれのプロパティで個別に指定することもできます

transition プロパティ
No プロパティ名 読み方 説明
01 transition-duration トランジション・デュレーション 変化が始まって終わるまでの時間を指定します
02 transition-property トランジション・プロパティ 変化が適用されるCSSのプロパティを指定します
03 transition-timing-function トランジション・タイミング・ファンクション 変化の度合いを指定します
04 transition-delay トランジション・ディレイ 変化が始まる時間を指定します
05 transition トランジション 上記の4つのプロパティを一括で指定できる、ショートハンド・プロパティです

transition-duration プロパティ

transition-duration(トランジション・デュレーション)は、変化が始まって終わるまでの時間を指定できるプロパティです

         セレクタ名 {
            -webkit-transition-duration:値;
            transition-duration:値;
         }

値は、秒数またはミリ秒数で指定します

単位は s または ms になります

指定できる単位 秒で換算
s 1s は1秒
ms 1ms は1000分の1秒

※ 秒数の指定で、0 秒を指定するときは単位も記述してください

CSS では値が 0 のときは単位を省略することができますが、省略できるのは、長さを表す length値 です

例えば長さを表す margin や padding などをは、margin:0 と指定しても問題ありません

今回は秒数を表す time値 になりますので、0 のときでも単位を省略せずに記述してください

使用例

transition-duration : 3s;

ttransition-duration : 6s;

一覧表に戻る

transition-property プロパティ

transition-property(トランジション・プロパティ) は、変化を適用するプロパティを指定できるプロパティです

         セレクタ名 {
            -webkit-transition-property:値;
            transition-property:値;
         }

指定できる値は下記になります

説明
all(初期値) トランジションの効果を適用できる全てのプロパティを指定します
none どのプロパティも変化しません
プロパティ名 トランジションを適用するプロパティ名を指定します。カンマ区切りで複数指定すること可能です

使用例

transition-property なし;

transition-property : transform;

imgに background-color:blue を指定しています

これで背景が青になります


transition-property:transform を指定することで、transition の効果が適用されるプロパティは tornsform のみになります


「START」を押すと、右に 300px 移動しはじめて、背景が青になりますが、transition の効果が適用されるのは transform のみになります

2 秒かけて変化するのは、transform のみになります

背景色の指定には transition の効果は適用されませんので、「START」を押すとすぐに青に変わります

一覧表に戻る

transition-timing-function プロパティ

transition-timing-function(トランジション・タイミング・ファンクション)は、変化の度合いを指定できるプロパティです

         セレクタ名 {
            -webkit-transition-timing-function:値;
            transition-timing-function:値;
         }

指定できる値は下記になります

No 読み方 説明
01 ease(初期値) イーズ 開始時と終了時は緩やかに変化します
02 linear ライナー 開始から終了まで一定に変化します
03 ease-in イーズ・イン 開始時は緩やかに変化、終了に近づくと早く変化します
04 ease-out イーズ・アウト 開始時は早く変化し、終了時は緩やかに変化します
05 ease-in-out イーズ・イン・アウト 開始時と終了時は、かなり緩やかに変化します
06 cubic-bezier
(x軸の値, y軸の値, x軸の値, y軸の値)
キュービック・ベジェ 変化の度合いを3次ベジェ曲線で指定します

使用例

transition-timing-function : ease;

transition-timing-function : linear;

transition-timing-function : ease-in;

transition-timing-function : ease-out;

transition-timing-function : ease-in-out;

一覧表に戻る

transition-delay プロパティ

transition-delay(トランジション・ディレイ) は、変化が始まる時間を指定します

         セレクタ名 {
            -webkit-transition-delay:値;
            transition-delay:値;
         }

時間は「transition-duration」と同じく秒数またはミリ秒数で指定します

使用例

transition-delay : 2s;

2秒待って!

transition-delay:2s を指定してるので、「START」を押すしてから 2 秒後に変化します (2 秒って結構長い…)

一覧表に戻る

transition プロパティ

今までのプロパティをまとめて指定できるショートハンドプロパティです

transitionプロパティの値に下記の順番で各値を指定します

  • transition-property の値
  • transition-duration の値
  • transition-timing-function の値
  • transition-delay の値

各値は半角スペースを空けて連続で記述します

         セレクタ名 {
            -webkit-transition:
                  transition-propertyの値 transition-durationの値
                  transition-timing-functionの値 transition-delayの値;
            transition:
                  transition-propertyの値 transition-durationの値
                  transition-timing-functionの値 transition-delayの値;
         }

複数指定する記述

複数のプロパティに対してまとめて記述する場合は、カンマ区切りで指定します

         セレクタ名 {
            -webkit-transition:
                  transition-propertyの値 transition-durationの値
                  transition-timing-functionの値 transition-delayの値 ,
                  transition-propertyの値 transition-durationの値
                  transition-timing-functionの値 transition-delayの値;
            transition:
                  transition-propertyの値 transition-durationの値
                  transition-timing-functionの値 transition-delayの値 ,
                  transition-propertyの値 transition-durationの値
                  transition-timing-functionの値 transition-delayの値;
         }

使用例

transition : transform 6s ease-in 0s , background-color 3s linear 3s;

一覧表に戻る

 

CPU と GPU