コース推薦:

CSS scaleY() 関数

定義と使用方法 scaleY() CSSの

scaleY() 関数は、要素を垂直に拡大するために使用されます。

scaleY() 関数は、要素の高さを増加または減少させるために使用されます。 transform 属性で使用されています。

インスタンス

例 1

を使用して scaleY() 複数の<div>要素の高さを拡大:

#myDiv1 {
  transform: scaleY(0.5);
}
#myDiv2 {
  transform: scaleY(70%);
}
#myDiv3 {
  transform: scaleY(1.1);
}

実際に試してみてください

例 2

を使用して scaleY() 画像の高さを拡大:

#img1 {
  transform: scaleY(0.5);
}
#img2 {
  transform: scaleY(70%);
}
#img3 {
  transform: scaleY(-0.5);
}
#img4 {
  transform: scaleY(1.1);
}

実際に試してみてください

CSS 文法

scaleY(s)
説明
s 必須。高さ拡大ベクトルの数値を指定します。

技術的詳細

バージョン: CSS Transforms Module Level 1

ブラウザのサポート

テーブルの数字は、その機能を完全にサポートする最初のブラウザのバージョンを示しています。

クローム エッジ ファイアフォックス サファリ オペラ
1 12 3.5 3.1 10.5

関連ページ

チュートリアル:CSS 2D 変換

参考:CSS transform 属性

参考:CSS scale 属性

参考:CSS scale() 函数

参考:CSS scale3d() 函数

参考:CSS scaleX() 函数