河南省睢县网站建设_网页定制制作与开发多少钱_做到满意为止

下面的例子把 <div> 元素缩减为其原始高度的一半：

实例

div {
  transform: scaleY(0.5);}

亲自试一试

skewX() 方法

skewX() 方法使元素沿 X 轴倾斜给定角度。

下例把 <div> 元素沿X轴倾斜 20 度：

实例

div {
  transform: skewX(20deg);}

亲自试一试

skewY() 方法

skewY() 方法使元素沿 Y 轴倾斜给定角度。

下例把 <div> 元素沿 Y 轴倾斜 20 度：

实例

div {
  transform: skewY(20deg);}

亲自试一试

skew() 方法

skew() 方法使元素沿 X 和 Y 轴倾斜给定角度。

下面的例子使 <div> 元素沿 X 轴倾斜 20 度，同时沿 Y 轴倾斜 10 度：

实例

div {
  transform: skew(20deg, 10deg);}

亲自试一试

如果未指定第二个参数，则值为零。因此，下例使 <div> 元素沿 X 轴倾斜 20 度：

实例

div {
  transform: skew(20deg);}

亲自试一试

matrix() 方法

matrix() 方法把所有 2D 变换方法组合为一个。

matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。

参数如下：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

实例

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);}

亲自试一试

CSS 转换属性

下表列出了所有 2D 变换属性：

CSS 2D 转换方法