transformプロパティを使うことで、要素に対して移動、回転、伸縮、傾斜の変形を加えるてアニメーションさせることができます
ボタンにマウスカーソルを乗せたときに、移動したり、大きさを変えたりするのに使われるプロパティです
jQueryやJavaScriptを使って似たようなことができますが、transform3d は、CPU ではなく GPU を使用しているので、CSSを使う方がヌルヌル動きます CPU と GPU とは?
※jQUery ver 3 では、アニメーションに requestAnimationFrame を使用するようになりましたので、jQuery でも同様にヌルヌルを動くようになりました。
ブラウザの対応状況を考慮して、ベンダープレフィックス「-webkit-」をつけておく方が無難です
transform プロパティ は、よく transition(トランジション)というプロパティと一緒に使うことがあります
transition プロパティ とは変化するまでの時間を設定するプロパティです
ボタンにマウスカーソルを乗せたときに、色や大きさなどが変わる時間を設定するときに使われるプロパティです
この transitionプロパティ と一緒に transform(トランスフォーム)という変形(移動・回転・伸縮・傾斜)に関するプロパティが一緒に使われます
transform(トランスフォーム)は、直訳すると変形という意味です
変形には移動、回転、伸縮、傾斜の4つがあります
transform プロパティ の値に関数を指定することで、移動、回転、伸縮、傾斜の設定ができます
移動、回転、伸縮は、3D(XYZ方向)による指定ができます
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で、移動の指定ができます
2D(XY方向)または3D(XYZ方向)の指定が可能です
translate() 関数でX軸とY軸の移動をまとめて指定できます
translateX() 関数、translateY() 関数、translateZ() 関数を使って個別に移動距離を指定することもできます
それぞれを続けて記述することで2D(XY方向)または3D(XYZ方向)の指定が可能ですが、3D(XYZ方向)をまとめて指定できるtranslate3d()関数があります
単位は px で指定します
セレクタ名 { -webkit-transform:translate(X軸方向の移動距離,Y軸方向の移動距離); transform:translate(X軸方向の移動距離,Y軸方向の移動距離); }
transform : translate(100px,100px);
セレクタ名 { -webkit-transform:translateX(X軸方向の移動距離); transform:translateX(X軸方向の移動距離); }
transform : translateX(300px);
セレクタ名 { -webkit-transform:translateY(Y軸方向の移動距離); transform:translateY(Y軸方向の移動距離); }
transform : translateY(300px);
rotate()関数で、回転の指定ができます
rotate()関数は、要素の回転を指定します
rotateX()関数、rotateY()関数、rotateZ()関数を使ってそれぞれの方向に対して回転を指定することもできます
それぞれを続けて記述することで2D(XY方向)または3D(XYZ方向)の指定が可能です
回転軸を3D(XYZ方向)で指定し、回転角度を指定できるrotate3d()関数があります
値には、回転角度を指定します
回転させる角度は、degで表します
deg は degree(ディグリー)の略で、円周を360分とした角度を表す単位です
例えば、90度回転させたいときは90degと指定します
正数だと時計回りで回転し、負数だと反時計回りに回転します
セレクタ名 { -webkit-transform:rotate(回転角度); transform:rotate(回転角度); }
transform : rotate(360deg);
transform : rotate(-360deg);
セレクタ名 { -webkit-transform:rotateX(回転角度); transform:rotateX(回転角度); }
transform : rotateX(520deg);
セレクタ名 { -webkit-transform:rotateY(回転角度); transform:rotateY(回転角度); }
transform : rotateY(520deg);
scale()関数で、伸縮の指定ができます
2D(XY方向)または3D(XYZ方向)の指定が可能です
scale()関数でX軸とY軸の伸縮率をまとめて指定できます
scaleX()関数、scaleY()関数、scaleZ()関数を使って個別に伸縮率を指定することもできます
それぞれを続けて記述することで2D(XY方向)または3D(XYZ方向)の指定が可能ですが、3D(XYZ方向)をまとめて指定できるscale3d()関数があります
値は数値のみで指定します
数値は、1を基準に伸縮する比率を整数または少数で指定します
セレクタ名 { -webkit-transform:scale(数値,数値); transform:scale(数値,数値); }
transform : scale(3,3);
セレクタ名 { -webkit-transform:scaleX(数値); transform:scaleX(数値); }
transform : scaleX(3);
セレクタ名 { -webkit-transform:scaleY(数値); transform:scaleY(数値); }
transform : scaleY(10);
skew()関数で、傾斜の指定ができます
2D(XY方向)のみ指定できます
skew()関数でX軸とY軸の傾斜角度をまとめて指定できます
skewX()関数、skewY()関数を使って個別に傾斜角度を指定することもできます
傾斜角度の単位はdegで指定します
セレクタ名 { -webkit-transform:skew(X軸の傾斜角度,Y軸の傾斜角度); transform:skew(X軸の傾斜角度,Y軸の傾斜角度); }
transform : skew(45deg,45deg);
セレクタ名 { -webkit-transform:skewX(X軸の傾斜角度); transform:skewX(X軸の傾斜角度); }
transform : skewX(45deg);
セレクタ名 { -webkit-transform:skewY(Y軸の傾斜角度); transform:skewY(Y軸の傾斜角度); }
transform : skewY(45deg);
transform-origin(トランスフォーム・オリジン)プロパティは、要素の基点を指定するプロパティです
初期値は2Dの場合は 50% 50% で、3Dの場合は 50% 50% 0 で要素の中心になります
transform-originプロパティ を指定しないと、初期値が基点になります
transform-originプロパティ の値には基点となるX軸とY軸の位置を指定します
値には、単位付き数値またはワード(left center right top center bottom)で指定してください
平行移動を行う traslate()関数 のように相対的な移動のみを行う場合は変形の基点は関係しませんが、例えば回転を行う 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);
セレクタ名 { -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 は、ショートハンドプロパティを含め5つのプロパティがあります
ショートハンドプロパティの transition で一括て指定することも出来るし、それぞれのプロパティで個別に指定することもできます
No | プロパティ名 | 読み方 | 説明 |
---|---|---|---|
01 | transition-duration | トランジション・デュレーション | 変化が始まって終わるまでの時間を指定します |
02 | transition-property | トランジション・プロパティ | 変化が適用されるCSSのプロパティを指定します |
03 | transition-timing-function | トランジション・タイミング・ファンクション | 変化の度合いを指定します |
04 | transition-delay | トランジション・ディレイ | 変化が始まる時間を指定します |
05 | transition | トランジション | 上記の4つのプロパティを一括で指定できる、ショートハンド・プロパティです |
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(トランジション・プロパティ) は、変化を適用するプロパティを指定できるプロパティです
セレクタ名 { -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(トランジション・タイミング・ファンクション)は、変化の度合いを指定できるプロパティです
セレクタ名 { -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(トランジション・ディレイ) は、変化が始まる時間を指定します
セレクタ名 { -webkit-transition-delay:値; transition-delay:値; }
時間は「transition-duration」と同じく秒数またはミリ秒数で指定します
transition-delay : 2s;
2秒待って!
transition-delay:2s を指定してるので、「START」を押すしてから 2 秒後に変化します (2 秒って結構長い…)
今までのプロパティをまとめて指定できるショートハンドプロパティです
transitionプロパティの値に下記の順番で各値を指定します
各値は半角スペースを空けて連続で記述します
セレクタ名 { -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;
-- CLOSE --
パソコン全体の作業を司るプロセッサです。CPU の性能が良ければ、パソコンも早くなります。
線を引いたり、色を塗ったりと、画像処理(単純な作業)が得意なプロセッサです。
たくさんのコアで並行処理するので CPU よりも処理時間は早くなりますが、並行処理ができる単純な作業しかできません。
また、決められた作業(繰り返しなど)なので効率よく作業できるため、消費電力も抑えられます。
何らかの処理がはじまると、まず CPU が処理をはじめようとします。CPU が、GPU が得意な作業だと判断すると、GPU にヘルプを依頼して GPU に処理をしてもらいます。
(当時、開閉をスムーズにするのに苦労しました…)