CSS skew() 函數

定義和用法

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

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

實例

例子 1

使用 skew() 傾斜幾個 <div> 元素:

#myDiv1 {
  transform: skew(15deg);
}
#myDiv2 {
  transform: skew(15deg, 15deg);
}
#myDiv3 {
  transform: skew(-15deg);
}

親自試一試

例子 2

使用 skew() 傾斜圖像:

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

親自試一試

CSS 語法

skew(ax, ay)
描述
ax 必需。角度。指定沿 x 軸的傾斜。
ay 可選。角度。指定沿 y 軸的傾斜。如果省略,該值設置為 0。

技術細節

版本: CSS Transforms Module Level 1

瀏覽器支持

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

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

相關頁面

教程:CSS 2D 變換

參考:CSS transform 屬性

參考:CSS skewX() 函數

參考:CSS skewY() 函數