コース推薦：

CSS skewX() 関数

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

skewX() 関数は、指定された角度でx軸に沿って要素を傾斜するために使用されます。 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() 函数