CSS3の変形機能「transformプロパティ」の使い方
公開日：2014年9月10日
最終更新日：2019年4月6日
CSS3では要素の変形処理を行う「transformプロパティ」が追加されました。処理方法としては、拡大縮小、回転、移動、ゆがみの４つです。イベント発生時やアニメーションの中でこのプロパティを使うと、動きのある効果的なWebページを作成できます。
変形機能には2Dだけでなく3D Functionもあるのですが、難しいためここでは2Dに絞って解説いたします。実際のところ、3D Matrixを理解するには数学的素養が必要で、私もあまり理解できておりません。ただ現状では2Dの基本的な使い方さえ覚えれば十分と感じています。
【コンテンツ】
- 仕様策定の動向とブラウザの対応状況
- transformプロパティとファンクション
- transform-originプロパティ
- 拡大縮小(scale)のサンプル
- 移動(translate)のサンプル
- 回転(rotate)のサンプル
- ゆがみ(skew)のサンプル
仕様策定の動向とブラウザの対応状況
W3Cで策定している変形機能の仕様は、
「CSS Transforms Module Level 1」に記述されています。
記事執筆時点での最新仕様は、2013年11月26日付けの作業草案(Working Draft)です。
http://www.w3.org/TR/2013/WD-css-transforms-1-20131126/
主要ブラウザの最新バージョンはすべて対応しています。
Safari、iOS Safari、Androidブラウザは、ベンダープレフィックス「-webkit-」が必要です。
IE9はベンダープレフィックス「-ms-」が必要です。またIE8以下は非対応です。
transformプロパティとファンクション
メインで使うプロパティは、「transform」です。
書式は以下のように、transform function を記述します。transform function は複数列挙することができ、その場合は半角スペースで区切ります。
【transformプロパティの書式】
transform: <transform function>+;
tranform function には、拡大縮小(scale)、移動(translate)、回転(rotate)、ゆがみ(skew)の４つがあります。
以下はファンクション一覧になります。
| ファンクション | 説明 |
|---|---|
| scale(X倍率[, Y倍率]) | 要素を拡大縮小します。Y倍率を省略したときは X倍率と同じ値になります。 |
| scaleX(X倍率) | 要素をX方向に拡大縮小します。 |
| scaleY(Y倍率) | 要素をY方向に拡大縮小します。 |
| translate(X移動量[, Y移動量]) | 要素を移動します。Y移動量を省略したときは '0' になります。 |
| translateX(X移動量) | 要素をX方向に移動します。 |
| translateY(Y移動量) | 要素をY方向に移動します。 |
| rotate(角度) | 要素を回転します。角度が正の値のとき時計回りです。 |
| skew(Xゆがみ角度[, Yゆがみ角度]) | 要素をゆがめます。Yゆがみ角度を省略したときは '0' になります。 |
| skewX(Xゆがみ角度) | 要素をX方向にゆがめます。 |
| skewY(Yゆがみ角度) | 要素をY方向にゆがめます。 |
transform-originプロパティ
transform-originプロパティは、基準点を指定します。
特に回転とゆがみのときには基準点の指定は重要です。
【transform-originプロパティの書式】
transform-origin: X位置[, Y位置];
位置は、%、pxなどを単位とする数値、キーワード(top,bottom,left,right,center)で指定できます。
(0, 0)は要素の左上を示します。
transform-originを指定しないときのデフォルトは(50%, 50%)です。
拡大縮小(scale)のサンプル
それでは実際にいくつかサンプルを示しながら解説しましょう。
サンプル画像にマウスオーバーさせると変形するように作っています。
タッチデバイスで見ている方は、画像をタップしてください。
まずは拡大縮小です。
transformプロパティにscaleファンクションを指定し、画像にマウスオーバーさせると拡大縮小するようになっています。
マウスオーバー or
タップで縮小
マウスオーバー or
タップで拡大
CSSは以下になります。
「box-second」では、scaleファンクションにパラメーターを1個しか記述していませんが、Y倍率はX倍率と同じ '2' になります。
|
1 2 3 4 5 6 7 8 9 10 |
.box-first img:hover, .box-first img:active { -webkit-transform: scale(0.3, 0.5); transform: scale(0.3, 0.5); } .box-second img:hover, .box-second img:active { -webkit-transform: scale(2); transform: scale(2); } |
移動(translate)のサンプル
transformプロパティにtranslateファンクションを指定し、画像にマウスオーバーさせると左右に移動するようになっています。
マウスオーバー or
タップで右へ移動
マウスオーバー or
タップで左へ移動
CSSは以下になります。
「box-fourth」では、translateファンクションにパラメーターを1個しか記述していませんが、このときY移動量は '0' になります。
このサンプルではX方向にしか移動していませんので、translateの代わりにtranslateXを使っても構いません。
|
1 2 3 4 5 6 7 8 9 10 |
.box-third img:hover, .box-third img:active { -webkit-transform: translate(70px, 0); transform: translate(70px, 0); } .box-fourth img:hover, .box-fourth img:active { -webkit-transform: translate(-70px); transform: translate(-70px); } |
回転(rotate)のサンプル
transformプロパティにrotateファンクションを指定し、画像にマウスオーバーさせると回転するようになっています。
マウスオーバー or
タップで左へ回転
マウスオーバー or
タップで右へ回転
CSSは以下になります。
「box-sixth」では、transform-originプロパティで回転の基準点を移動しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.box-fifth img:hover, .box-fifth img:active { -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } .box-sixth img:hover, .box-sixth img:active { -webkit-transform-origin: 50% 80%; transform-origin: 50% 80%; -webkit-transform: rotate(75deg); transform: rotate(75deg); } |
ゆがみ(skew)のサンプル
transformプロパティにskewファンクションを指定し、画像にマウスオーバーさせるとゆがむようになっています。
マウスオーバー or
タップでゆがみ
マウスオーバー or
タップでゆがみ
CSSは以下になります。
「box-seventh」では、skewとともにtranslateXを併記し、要素の移動も行っています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.box-seventh img:hover, .box-seventh img:active { -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: skew(-15deg, 5deg) translateX(20px); transform: skew(-15deg, 5deg) translateX(20px); } .box-eighth img:hover, .box-eighth img:active { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: skew(20deg); transform: skew(20deg); } |
いかがでしたでしょうか。JavaScriptを使わずCSSだけでもここまで変形が可能ですので、CSSアニメーションと組み合わせれば簡単な動的サイトが実現できます。
スポンサーリンク
