CSS3の変形機能「transformプロパティ」の使い方

CSS3では要素の変形処理を行う「transformプロパティ」が追加されました。処理方法としては、拡大縮小、回転、移動、ゆがみの4つです。イベント発生時やアニメーションの中でこのプロパティを使うと、動きのある効果的なWebページを作成できます。

変形機能には2Dだけでなく3D Functionもあるのですが、難しいためここでは2Dに絞って解説いたします。実際のところ、3D Matrixを理解するには数学的素養が必要で、私もあまり理解できておりません。ただ現状では2Dの基本的な使い方さえ覚えれば十分と感じています。

【コンテンツ】

  1. 仕様策定の動向とブラウザの対応状況
  2. transformプロパティとファンクション
  3. transform-originプロパティ
  4. 拡大縮小(scale)のサンプル
  5. 移動(translate)のサンプル
  6. 回転(rotate)のサンプル
  7. ゆがみ(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)の4つがあります。

以下はファンクション一覧になります。

ファンクション 説明
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' になります。

移動(translate)のサンプル

transformプロパティにtranslateファンクションを指定し、画像にマウスオーバーさせると左右に移動するようになっています。


マウスオーバー or
タップで右へ移動


マウスオーバー or
タップで左へ移動

CSSは以下になります。
「box-fourth」では、translateファンクションにパラメーターを1個しか記述していませんが、このときY移動量は '0' になります。
このサンプルではX方向にしか移動していませんので、translateの代わりにtranslateXを使っても構いません。

回転(rotate)のサンプル

transformプロパティにrotateファンクションを指定し、画像にマウスオーバーさせると回転するようになっています。


マウスオーバー or
タップで左へ回転


マウスオーバー or
タップで右へ回転

CSSは以下になります。
「box-sixth」では、transform-originプロパティで回転の基準点を移動しています。

ゆがみ(skew)のサンプル

transformプロパティにskewファンクションを指定し、画像にマウスオーバーさせるとゆがむようになっています。


マウスオーバー or
タップでゆがみ


マウスオーバー or
タップでゆがみ

CSSは以下になります。
「box-seventh」では、skewとともにtranslateXを併記し、要素の移動も行っています。

いかがでしたでしょうか。JavaScriptを使わずCSSだけでもここまで変形が可能ですので、CSSアニメーションと組み合わせれば簡単な動的サイトが実現できます。

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ