cman.jp > WEBページ作成TOP > CSSリファレンス > 「2Dトランスフォーム」
WEBページ作成
広告
transform 「変形」
「transform」を使用すると要素を変形させる事が出来ます。
アニメーションとの組み合わせで要素が回り続けたり、拡大縮小などを繰り返すことができます。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 3.0 | 全要素 | なし |
広告
transformの指定方法
「transform」は要素を変形する場合に使用します。
| 構文 | |||||
|---|---|---|---|---|---|
|
transform : 下記の値を設定; |
|||||
| 種別 | プロパティ/設定値 | 意味 | サンプル | ||
| 移動 | translate(x,y) | 横(水平)横(垂直)に移動する 左・上：マイナス、右・下：プラス 単位：px |
translate(-30px,10px) |
||
| translateX(x) | 横(水平)に移動する 左：マイナス、右：プラス 単位：px |
translateX(-20px) |
|||
| translateY(y) | 横(垂直)に移動する 上：マイナス、下：プラス 単位：px |
translateY(10px) |
|||
| translateZ(z) | 直交に移動する 単位：px |
translateZ(30px) |
|||
| translate3d(x,y,z) | 3次元に移動する 単位：px |
translate3d(-30px,10px,20px) |
|||
| 縮尺 | scale(x,y) | 横(水平)横(垂直)に拡大縮小する 1が原寸 単位：数値 |
scale(1.5, 0.6) |
||
| scaleX(x) | 横(水平)に拡大縮小する 1が原寸 単位：数値 |
scaleX(0.6) |
|||
| scaleY(y) | 横(垂直)に拡大縮小する 1が原寸 単位：数値 |
scaleY(0.6) |
|||
| scaleZ(z) | 直交に拡大縮小する 1が原寸 単位：数値 |
scaleZ(0.6) |
|||
| scale3d(x,y,z) | 3次元に拡大縮小する 1が原寸 単位：数値 |
scale3d(1.5, 0.6 ,0.5) |
|||
| 回転 | rotate(r) | 回転する 反時計：マイナス、時計：プラス 単位：deg |
rotate(-30deg) |
||
| rotateX(r) | 横軸で回転する 単位：deg |
rotateX(45deg) |
|||
| rotateY(r) | 縦軸で回転する 単位：deg |
rotateY(45deg) |
|||
| rotateZ(r) | 直交で回転する 単位：deg |
rotateZ(45deg) |
|||
| rotate3d(x,y,z,r) | 3次元で回転する 単位：deg |
rotate3d(1, 0.7, 0.5, 45deg) |
|||
| 傾斜 | skew(r,r) | 横(水平)横(垂直)に傾斜する 左・上：プラス、右・下：マイナス 単位：deg |
skew(30deg, 20deg) |
||
| skewX(r) | 横(水平)に傾斜する 左：プラス、右：マイナス 単位：deg |
skewX(30deg) |
|||
| skewY(r) | 横(水平)に傾斜する 上：プラス、下：マイナス 単位：deg |
skewY(20deg) |
|||
| 奥行 | perspective(d) | 奥行きを指定します 0以上の奥行き長さ 単位：px |
perspective(100px) rotateX(60deg) |
||
| 縮尺 傾斜 移動 |
matrix(a,b,c,d,e,f) | a : 横(水平)の縮尺率 b : 縦(垂直)の傾斜率 c : 横(水平)の傾斜率 d : 縦(垂直)の縮尺率 e : 横(水平)の移動距離 f : 縦(垂直)の移動距離 |
matrix(1.2, 0.3, 0.2, 0.8, 20, 10) |
||
| matrix3d( a,b,c,d, e,f,g,h, i,j,k,l, m,n,o,p) |
指定が難しいので説明は省略します | － | |||
transform のサンプル
| 変形 | x : 横(水平) | y : 縦(垂直) | z : 直交 |
|---|---|---|---|
| 移動 | translateX(0) |
translateY(0) |
translateZ(0) |
| 縮尺 | scaleX(1) |
scaleY(1) |
scaleZ(1) |
| 回転 | rotate(0) |
－ | － |
rotateX(0) |
rotateY(0) |
rotateZ(0) |
|
| 傾斜 | skewX(0) |
skewY(0) |
－ |
| 奥行 | perspective(0) |
||
| 関連するCSS(STYLE) | |
|---|---|
| transform-origin | 要素変形の起点 |
| transform-style | 要素重なり時の３D表示 |
| backface-visibility | 裏面の表示 |
| perspective | 子要素の奥行きの指定 |
| perspective-origin | 子要素の奥行きのx軸・y軸方向の位置 |
広告