【CSS Modules】scaleプロパティの使い方

scaleプロパティは、CSS要素の拡大・縮小変形を定義するプロパティです。要素の視覚的なサイズを指定された比率で変更し、2Dまたは3D空間における要素の寸法を調整する際に使用されます。このプロパティに数値を指定することで、X軸、Y軸、そして3D変換の場合はZ軸方向の拡大率を設定します。

単一の数値を指定すると、例えばscale: 2;のように、要素はX軸とY軸の両方向で指定された値に拡大されます。これにより、要素の縦横比を保ったまま一律にサイズが変更されます。二つの数値を指定することも可能で、例えばscale: 1.5 0.8;と記述した場合、最初の値がX軸方向、二番目の値がY軸方向の拡大率として適用されます。これは要素の縦横比を独立して制御し、特定の方向に引き伸ばしたり縮めたりする際に役立ちます。

このプロパティは、CSSのtransformプロパティの一部として機能します。要素のレイアウトに影響を与えず、描画時にのみ視覚的な変形を適用するため、変形された要素の周囲の要素配置は変わりません。主に、ホバーやアニメーションなど、要素に動的な視覚効果を加えたい場合に有効です。変形の原点はデフォルトでは要素の中心ですが、transform-originプロパティで変更できます。

Copy
1.element {
2  scale: none | <number> | <number> <number> | <number> <number> <number>;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません