CSS scaleX() 函數

定義和用法

CSS 的 scaleX() 函數用于水平縮放元素。

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)

技術細節

瀏覽器支持

表格中的數字表示首個完全支持該函數的瀏覽器版本。

相關頁面

教程：CSS 2D 變換

參考：CSS transform 屬性

參考：CSS scale 屬性

參考：CSS scale() 函數

參考：CSS scale3d() 函數

參考：CSS scaleY() 函數