項 目 | 説 明 |
---|---|
記述形式 | セレクタ {transform: 値 } |
値 の形式 | none | transform関数 [transform関数] |
初 期 値 | none |
対応ブラウザー | C3+ / e?+ / N?+ / Fx4+ / Op10+ / Ch9+ / Sa5+ |
適用可能な要素 | 2D変形,または,3D変形の対象要素 |
継 承 | しない |
transformプロパティ は,要素に2D変形,または,3D変形の適用を指定します。
指定できる値の形式は,以下のとおりです。
値 | 説 明 |
---|---|
none | 変形をしません。 |
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つまで指定することができます。
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) による変形
|
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度傾いた見出し. もちろん見出し以外でも使用できます. 工夫しだいです. |