サンプル例の内容

サンプルの各ブロックには [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は、Ｙ軸方向に20deg回転し、Z軸方向に2倍になるscaleZ(2)を指定。
例2bは比較用にＹ軸方向に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)

ページトップへ