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

拡大・縮小表示プロパティ

transform : scale / 要素の拡大・縮小表示

scaleのサンプル

例1

ホバー時 transform : scale (1.5,0.5)

例2a

ホバー時 transform : scaleZ (2) rotateY (20deg)
親divにperspective : 100px

例2b

ホバー時 rotateY (20deg)
親divにperspective : 100px

例3

ホバー時 transform : scale (0)

サンプル例の内容

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

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

【例2a、例2b】
scale、scaleX、scaleYは縦横が伸縮するだけなので、scaleZをやってみた例です。
両方ともに親divにperspective:100px;を設定。

2aは、Y軸方向に20deg回転し、Z軸方向に2倍になるscaleZ(2)を指定。
例2bは比較用にY軸方向に20deg回転のみ指定しています。

見比べると、一応、Z軸方向に2bより大きく変形しています。

【例3】
マウスホバーで「transform: scale(0)」を指定。
要素が小さくなって消える演出に使える設定だと思います。

拡大・縮小表示プロパティ

scale(xr,yr)
X方向にxr、Y方向にyrの比率で拡大縮小。Y方向省略可(同じ比率になる)。例 transform:scale(0.5,0.8)
scaleX(xr)
X方向にxrの比率で拡大縮小。例 transform:scaleX(0.5)
scaleY(yr)
Y方向にyrの比率で拡大縮小。例 transform:scaleY(0.5)
scaleZ(zr)
Z方向にzrの比率で拡大縮小。例 transform:scaleZ(0.5)
scale3d(xr,yr,zr)
X方向にxr、Y方向にyr、Z方向にzrの比率で拡大縮小。例 transform:scale3d(1,0.5,0.8)

ページトップへ

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
お問い合せ