CSS3大接近

第3回 transformプロパティ

この記事を読むのに必要な時間:およそ 10.5 分

今回はCSS3でもあまり一般的に知られてないtransformプロパティについて説明します。transformプロパティは2008年の11月まではWebkit系とAppleのブラウザとSafariの独自実装でしたが,11月以降は正式にW3CにEditors Draftとして受けいられ,現在は策定中です※1)。

今後のブラウザでは,より一層のCSS3やSVG, HTML5の対応,レンダリングエンジンのスピードに焦点があてられます。いち早く,CSS3に慣れ実践的に使えるように,今から新しいセレクタも含めプロパティを勉強し実践で使えるようしておくべきでしょう。

今回説明するプロパティは『transformプロパティ』『transform-originプロパティ』です。両方のプロパティに共通するtransform(トランスフォーム)という名前のとおり,『変形』を実装するためのプロパティです。

※1
transformプロパティは,SVGのTransformの属性を元に実装されています。

transformプロパティをサポートしているブラウザ

現在,『transformプロパティ』『transform-originプロパティ』プロパティをサポートしているブラウザはWebkit, Safariの3.1以上, Google Chromeと,W3Cの草案に正式に採用されてから僅かしか経っていませんがFirefoxの3.1がサポートしています。OperaやInternet Exprolerが執筆時点ではサポートしていません。

対応ブラウザ:

なお,実際に利用するには,Webkit, Safari, Google Chromeの場合-webkit-. Firefoxの場合-moz-とプリフィックス(接頭辞)を記述する必要があります。

Transformの基本

Transformプロパティは,拡大(scale),回転(rotate),ゆがみ(skew),移動(translate)と,4つのファンクションがあります。

表1 実装済みTransformファンクション一覧

ファンクション名 機能
transform-origin transformの支点を設定
rotate 回転
translate 移動
scale 拡大/縮小
skew X軸,Y軸へのゆがみ

表2 未実装Transformファンクション覧

ファンクション名 機能
backface-visibility 要素の裏側の可視,不可視
perspective 奥行き
perspective-origin 奥行きの支点
transform-style 2D(flat)と3Dの指定

Transformプロパティを学ぶ際は,3D(3次元)で考えることが大切です。これはCSS全般に言えることで,CSSは2Dではなく3Dを扱うからです。3Dで考えるクセを身につけるようにしましょう。

3DとはX軸,Y軸,Z軸のそれぞれ3方向への軸になります。

  • X軸(上下方向)
  • Y軸(左右方向)
  • Z軸(奥行き)

図1 3次元でCSSを考える

図1 3次元でCSSを考える

Transformプロパティの記述方法

上述したように,現在,transformプロパティを記述する場合には,webkit系では-webkit-を,firefoxでは-moz-を接頭辞としてプロパティの前に記述します。記述の際には以下のようにFirefox, Webkit系、今後将来採用された際の記述をするといいと思います。

  1. -moz-transform: hoge;
  2. -webkit-transform: hoge;
  3. transform: hoge;

Transformプロパティの記述順序

transformプロパティは記述の順番に適用されます。特にscale(拡大・縮小)の後にtranslate(移動)を適用させると移動する値にも差がでてしまうことに注意してください。

次ページからは,実際に各プロパティのサンプルを確認していきましょう。

著者プロフィール

菊池崇(きくちたかし)

ActLink株式会社にてプロデューサー,allWebクリエイター塾ではXHTML+CSS,microformatsの講師。また,11月に行われたWeb Directions Eastのプロデューサーでもありmicroformats japanの代表。

コメント

コメントの記入