コース推薦:

CSS scaleX() 関数

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

scaleX() 関数は、要素の水平拡大に使用されます。

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

インスタンス

例1

を使用して scaleX() 複数の<div>要素の幅を拡大:

#myDiv1 {
  transform: scaleX(0.7);
}
#myDiv2 {
  transform: scaleX(90%);
}
#myDiv3 {
  transform: scaleX(1.1);
}

自分で試してみる

例2

を使用して scaleX() 画像の幅を拡大:

#img1 {
  transform: scaleX(0.6);
}
#img2 {
  transform: scaleX(90%);
}
#img3 {
  transform: scaleX(-0.6);
}
#img4 {
  transform: scaleX(1.1);
}

自分で試してみる

CSS 语法

scaleX(s)
説明
s 必要。幅拡大ベクトルの数値を指定します。

技術的な詳細

バージョン: CSS Transforms Module Level 1

ブラウザのサポート

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

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

相关页面

教程:CSS 2D 变换

参考:CSS transform 属性

参考:CSS scale 属性

参考:CSS scale() 函数

参考:CSS scale3d() 函数

参考:CSS scaleY() 函数