原森情報技術研究所 WEBコンテンツ企画・制作・運営・サポート / 兵庫県 神戸市 明石市 /

表示位置移動プロパティ

transform : translate / 表示位置移動

translateのサンプル

例1

白枠ホバー時 translate (20px,30px)

例2

白枠ホバー時 translate3d (20px,30px,-50px)

例3

白枠ホバー時 translate3d (20px,30px,-50px)
親box(白枠)にperspectiveを指定。

例4

白枠ホバー時 translateZ (-50px)
親box(白枠)にperspectiveを指定。

サンプル例の内容

サンプルの各ブロックには [transition : all 1s linear] を指定しています。それぞれ白枠にホバーするとボックスが変化します。

【例1】
マウスホバー(#trf_test_01:hover)に [transform : translate(20px,30px)] を指定しています。

【例2】
マウスホバー(#trf_test_02:hover)に [transform : translate3d(20px,30px,-50px)] を指定しています。
z軸がモニターに垂直の軸なので、奥に向かって-50px動いていることになっていますが、見た目は例1と同じになっています。

【例3】
#trf_test_03のブロックは#trf_test_02と同じ設定で、ホバー時も [translate3d(20px,30px,-50px)] に変化しますが、こちらの例ではブロックの親divブロック(白背景のボックス)に、3d変形時の奥行きの深さ「perspective:100px」を指定しているので、白背景の親divの中心にある消失点に向かって3Dっぽい動きになっています。

【例4】
例3と同じ設定で、ホバー時に [translateZ(-50px)] を指定。x , y が移動しないので、例3よりも親divの中心に向かって奥行き(z軸方向に-50pxっぽく)移動している印象があります。

表示位置移動プロパティ

translate(x,y)
X方向、Y方向に2D移動。Y方向省略可(y=0になる)。例 transform:translate(50px,50px)
translateX(x)
X方向に移動。例 transform:translateX(50px)
translateY(y)
Y方向に移動。例 transform:translateY(50px)
translateZ(z)
Z方向に移動。例 transform:translateZ(50px)
translate3d(x,y,z)
X方向、Y方向、Z方向に移動。例 transform:translate3d(10px.10px,20px)

ページトップへ

top > css3研究 > 
表示位置移動プロパティ

表示位置移動

translate(x) / x…[length]
translate(x,y) / x,y…[length]
translate(x) = translate(x,x)

translate3d(x,y,z) / x,y,z…[length]

translateX(x) / x…[length]
translateX(x) = translate(x,0)

translateY(y) / y…[length]
translateY(y) = translate(0,y)

translateZ(z) / z…[length]
translateZ(z) = translate3d(0,0,z)

拡大・縮小

scale(x) / x…[数量]
scale(x,y) / x,y…[数量]
scale(x) = scale(x,x)

scale3d(x,y,z) / x,y,z…[数量]

scaleX(x) / x…[数量]
scaleX(x) = scale(x,1) = scale3d(x,1,1)

scaleX(x) / x…[数量]
scaleX(x) = scale(x,1) = scale3d(x,1,1)

scaleY(y) / y…[数量]
scaleY(y) = scale(1,y) = scale3d(1,y,1)

scaleZ(z) / z…[数量]
scaleZ(z) = scale3d(1,1,z)

回転

rotate(a) / a…[角度]
aが正の値なら時計回り

rotate3d(x,y,z,a) / x,y,z…[数量] a…[角度]

rotateX(a) / a…[角度]
rotateX(a) = rotate3d(1,0,0,a)

rotateY(a) / a…[角度]
rotateY(a) = rotate3d(0,1,0,a)

rotateZ(a) / a…[角度]
rotateZ(a) = rotate3d(0,0,1,a)

傾斜変形

skew(ax [,ay]) / ax,ay…[角度]
ay省略時はaxのみの変形。※skewは非標準となった

skewX(a) / a…[角度]

skewY(a) / a…[角度]

行列指定

matrix(a , c , b , d , tx , ty)
線形 transform a , b , c , d …[数量](Gecko系のみlength可) 移動量 tx , ty …[length]

matrix3d(a1 , b1 , c1 , d1 , a2 , b2 , c2 , d2 , a3 , b3 , c3 , d3 , a4 , b4 , c4 , d4)
線形 transform a1 , b1 , c1 , d1 , a2 , b2 , c2 , d2 , a3 , b3 , c3 , d3 , d4 …[数量] 移動量 a4 , b4 , c4 …[length]

カテゴリMENU
お問い合せ