CSS3: transform プロパティ - 要素に2D変形,または,3D変形の適用

■ 概要

項  目説  明
記述形式 セレクタ {transform: }
値 の形式 none | transform関数transform関数
初 期 値 none
対応ブラウザー C3+ / e?+ / N?+ / Fx4+ / Op10+ / Ch9+ / Sa5+
適用可能な要素 2D変形,または,3D変形の対象要素
継  承 しない

■ 解説

transformプロパティ は,要素に2D変形,または,3D変形の適用を指定します。

指定できる値の形式は,以下のとおりです。

説  明
none 変形をしません。
transform関数 変形の内容を関数で指定します。(以下の表を参照)

■ transform関数について

指定できる transform関数の代表的なものとして,以下のものがあります。

transform関数一覧
種 類関数名とパラメータ変形内容
行 列
2D変形
3D変形
 matrix(数値, 数値, 数値, 数値, 数値, 数値)
6つの数値は,順に,水平方向縮尺垂直方向傾き水平方向傾き垂直方向縮尺水平移動距離垂直移動距離 です。
 matrix3d(数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値,
数値, 数値, 数値, 数値, 数値, 数値, 数値, 数値)
16個の数値は,変形のために(x,y,z,1)にかける4×4行列の成分の値です。 
移 動  translate(X方向移動距離, Y方向移動距離)
要素の表示位置を各軸に沿って平行移動させる際に使用します。

Z軸方向を加えた 3D 移動も可能です。
 translateX(X方向移動距離)
 translateY(Y方向移動距離)
 translateZ(Z方向移動距離)
 translate3d(X方向移動距離, Y方向移動距離, Z方向移動距離)
拡大・縮小  scale(X方向縮尺比率, Y方向縮尺比率)
要素の拡大・縮小の比率を1を基準として指定します。
0~1未満の値を指定した場合には縮小になります。
1以上の値を指定した場合には拡大になります。
 scaleX(X方向縮尺比率)
 scaleY(Y方向縮尺比率)
 scaleZ(Z方向縮尺比率)
 scale3d(X方向縮尺比率, Y方向縮尺比率, Z方向縮尺比率)
回 転  rotate(回転角度)2D回転の回転角を指定します。
 rotate3d(数値, 数値, 数値, 回転角度)回転軸の方向ベクトルを最初の3つの数値で指定します。
 rotateX(X軸のまわりの回転角度)X軸のまわりの回転角を指定します。
 rotateY(Y軸のまわりの回転角度)Y軸のまわりの回転角を指定します。
 rotateZ(Z軸のまわりの回転角度)Z軸のまわりの回転角を指定します。
傾 斜  skew(X軸の傾斜角度, Y軸の傾斜角度)X軸方向とY軸方向の傾斜変形を角度で指定します。
2番目の値を省略すると skewX と同じ変形になります。
 skewX(X軸の傾斜角度)X軸方向の傾斜変形を角度で指定します。
 skewY(Y軸の傾斜角度)Y軸方向の傾斜変形を角度で指定します。
遠近効果  perspective(数値)指定します。

以上のような多種・多様な関数による変形を同時に2つまで指定することができます。

■ 使用例( transform プロパティの利用(1))

HTMLソース
CSS
<head> ~ </head>
<style type="text/css">
<!-- 
   p.mattrans { background-color: yellow;}
   p.mattrans img { transform: matrix(0.6, 0.2, 0.1, 0.6, 220, 60); }
-->
</style>
HTML
<body> ~ </body>
<p class="mattrans">
   matrix(0.6, 0.2, 0.1, 0.6, 220, 60) による変形
   <br>
   <img src="../logo.gif" alt="大阪教育大学ロゴ" width="240" height="160">
   <br>
   <br>
   <br>
   <br>
</p>

ブラウザー 表示例

matrix(0.6, 0.2, 0.1, 0.6, 220, 60) による変形
大阪教育大学ロゴ



■ 使用例( transform プロパティの利用(2))

HTMLソース
CSS
<head> ~ </head>
<style type="text/css">
<!-- 
   .rotate1 {
      padding: 10px;
      margin: 60px 0 60px;
      background-color: aqua;
      transform: rotate(-7deg);
   }
   .rotate2 {
      padding: 10px;
      margin: 60px 0 60px;
      background-color: yellow;
      transform: rotate(7deg);
   }
-->
</style>
HTML
<body> ~ </body>
<div class="rotate1">
   <h1>ななめな見出し1</h1>
   <hr>
   <p>左に7度傾いた見出し.</p>
</div>
<hr>
<p>画像などだけではなく、ボックス内の文字列も傾きます.</p>
<p>見出しなどに使うと、ちょっとシャレた感じにできます.</p>
<hr>
<div class="rotate2">
   <h1>ななめな見出し2</h1>
   <hr>
   <p>右に7度傾いた見出し.</p>
</div>
<hr>
<p>もちろん見出し以外でも使用できます.</p>
<p>工夫しだいです.</p>
<hr>

ブラウザー 表示例

ななめな見出し1


左に7度傾いた見出し.


画像などだけではなく、ボックス内の文字列も傾きます.

見出しなどに使うと、ちょっとシャレた感じにできます.


ななめな見出し2


右に7度傾いた見出し.


もちろん見出し以外でも使用できます.

工夫しだいです.


■ 備考

【参考ページ】