関数 scaleY
関数 scaleY は要素をY軸に沿って
スケーリングします。スケーリングは、
transform-origin プロパティで指定される
点を中心に行われます。
関数の値は整数または小数です。
値が 1 より大きい場合、要素は拡大され、
値が小さい場合(例えば 0.5)、要素は
縮小されます。 1 を指定すると何も変化しません
(これがデフォルト値です)。
構文
セレクター {
transform: scaleY(数値);
}
例
ブロックにマウスオーバーすると、Y軸方向に
1.5 倍に拡大します:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scaleY(1.5);
}
:
例
ブロックにマウスオーバーすると、Y軸方向に
2 分の1に縮小します:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scaleY(0.5);
}
: