CSS skewX() 函數

定義和用法

CSS 的 skewX() 函數用于按照給定的角度沿 x 軸傾斜元素。

skewX() 函數在 transform 屬性中使用。

提示：skewX(a) 等同于 skew(a, 0)！

實例

例子 1

使用 skewX() 按照給定的角度沿 x 軸傾斜幾個 <div> 元素：

#myDiv1 {
  transform: skewX(15deg);
}
#myDiv2 {
  transform: skewX(30deg);
}
#myDiv3 {
  transform: skewX(-25deg);
}

親自試一試

例子 2

使用 skewX() 按照給定的角度沿 x 軸傾斜圖像：

#img1 {
  transform: skewX(25deg);
}
#img2 {
  transform: skewX(-25deg);
}
#img3 {
  transform: skewX(10deg);
}

親自試一試

CSS 語法

skewX(a)

技術細節

瀏覽器支持

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

相關頁面

教程：CSS 2D 變換

參考：CSS transform 屬性

參考：CSS skew() 函數

參考：CSS skewY() 函數