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);

translate

▶translateX() 関数の記述

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

transform : translateX(300px);

translateX

▶translateY() 関数の記述

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

transform : translateY(300px);

translateY

一覧表に戻る

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);

rotate

transform : rotate(-360deg);

rotate

▶rotateX() 関数の記述

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

transform : rotateX(520deg);

rotateX

▶rotateY() 関数の記述

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

transform : rotateY(520deg);

rotateY

一覧表に戻る

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);

scale

▶scaleX() 関数の記述

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

transform : scaleX(3);

scaleX

▶scaleY() 関数の記述

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

transform : scaleY(10);

scaleY

一覧表に戻る

skew 関数（傾斜）

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

2D（XY方向）のみ指定できます

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

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

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

▶skew() 関数の記述

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

transform : skew(45deg,45deg);

skew

▶skewX() 関数の記述

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

transform : skewX(45deg);

skewX

▶skewY() 関数の記述

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

transform : skewY(45deg);

skewY

一覧表に戻る

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);

rotateX

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

rotateX

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

rotateY

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

rotateY

▶scale() 関数の場合

      セレクタ名 {
            -webkit-transform:transform-origin: X軸の位置 Y軸の位置;
            transform-origin: X軸の位置 Y軸の位置;
      }

transform-origin : center center;
transform : scale(3,3);

rotateX

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

rotateX

一覧表に戻る

Transition（変化） プロパティ について

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

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

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

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

transition-duration プロパティ

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

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

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

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

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

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

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

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

使用例

START

transition-duration : 3s;

ttransition-duration : 6s;

一覧表に戻る

transition-property プロパティ

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

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

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

使用例

START

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:値;
         }

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

使用例

START

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;

START

２秒待って！

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;

START