WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「2Dトランスフォーム」

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)
指定が難しいので説明は省略します
ページTOP

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)

ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン