CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS3のscaleY()メソッドでY軸方向に要素を拡大・縮小する方法

CSS3のscaleY(y)メソッドを使うと、要素をY軸（縦）方向に拡大・縮小するスケール変換を適用できます。要素の高さだけを変更したい場合に便利な変換方法です。

scaleY()の構文

基本的な構文は以下のとおりです。

scaleY(y)

ここで指定する y は数値で、要素の各点の縦方向（縦座標）に適用する倍率を表します。たとえば「0.5」を指定すると高さが半分になり、「2」を指定すると2倍に拡大されます。1を指定した場合は元のサイズのまま変化しません。

scaleY()の使用例

実際にscaleY()を使ったサンプルコードを見てみましょう。

div {
    width: 60px;
    height: 60px;
    background-color: yellow;
}
.scaled {
    transform: scaleY(0.5);
    background-color: black;
}

この例では、まず幅60px・高さ60pxの黄色い正方形のdiv要素を定義しています。.scaledクラスが適用された要素にはtransform: scaleY(0.5)が設定されているため、高さが元の50％（30px相当）に縮小され、背景色も黒に変わります。

このようにscaleY()を使用すると、横幅はそのままに縦方向のみを柔軟にスケールできるため、アニメーションやホバーエフェクトなど、さまざまな場面で活用できます。

  1. CSS3の2D変換関数（transform）の使い方を徹底解説

    CSS3の2D変換（2D transforms）は、要素を移動（translate）・回転（rotate）・拡大縮小（scale）・傾斜（skew）させることで、見た目や配置を自由に変更できる強力な機能です。アニメーションやインタラクティブなデザインにも欠かせないテクニックとして広く使われています。 主な2D変換関数の一覧 以下に、よく使用される代表的な2D変換関数をまとめました。 番号関数と説明 1matrix(n,n,n,n,n,n)6つの値を使って行列（マトリックス）による変換を定義します。すべての変換を1つの関数で表現できます。 2translate(x,y)要素をX軸方向とY

  2. CSS3の3D変換関数の使い方を徹底解説！matrix3dやtranslate3dの基本

    CSS3の3D変換（3D Transform）を活用すると、要素をX軸・Y軸に加えてZ軸（奥行き）方向にも移動させることができます。2D変換では表現できない立体感のある演出が可能になり、モダンなWebデザインにおいて非常に強力な機能です。 CSS3で使える主な3D変換関数 3D変換を呼び出すために使用される主なメソッドは以下の通りです。 番号値と説明 1matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)16個の値からなる行列を使用して、要素を変換します。 2translate3d(x,y,z)X軸・Y軸・Z軸の3つの値を使って、要素を移動します。 3t