css3价格斜切_CSS3倾斜skew()方法_CSS3教程_绿叶学习网

9.5 倾斜skew()方法

作者(helicopter)

赞(22)

浏览(26434)

说明:原创教程，禁止转载

一、skew()方法

在CSS3中，我们可以使用skew()方法将元素倾斜显示。

skew()方法跟translate()方法、scale()方法一样，也有3种情况：

(1)skewX(x)：使元素在水平方向倾斜(X轴倾斜)；

(2)skewY(y)：使元素在垂直方向倾斜(Y轴倾斜)；

(3)skew(x,y)：使元素在水平方向和垂直方向同时倾斜(X轴和Y轴同时倾斜)；

1、skewX(x)方法

语法：

transform:skewX(x);

说明：

x表示元素在X轴倾斜的度数，单位为deg。

如果度数为正，表示元素沿水平方向(X轴)顺时针倾斜；如果度数为负，表示元素沿水平方向(X轴)逆时针倾斜。

2、skewY(y)方法

语法：

transform:skewY(y);

说明：

y表示元素在Y轴倾斜的度数，单位为deg。

如果度数为正，表示元素沿垂直方向(Y轴)顺时针倾斜；如果度数为负，表示元素沿垂直方向(Y轴)逆时针倾斜。

注意，这里是跟位移translate()方法类似的，也是W3C的奇葩规定。

3、skew(x,y)方法

语法：

transform:skew(x,y);

说明：

第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。

举例：

CSS3倾斜skew()方法

/*设置原始元素样式*/

#origin

{

margin:100px auto;/*水平居中*/

width:200px;

height:100px;

border:1px dashed silver;

}

/*设置当前元素样式*/

#current

{

width:200px;

height:100px;

color:white;

background-color: #3EDFF4;

text-align:center;

transform:skewX(30deg);

-webkit-transform:skewX(30deg); /*兼容-webkit-引擎浏览器*/

-moz-transform:skewX(30deg);/*兼容-moz-引擎浏览器*/

}

在浏览器预览效果如下：

分析：

对于初学者，可能一时半会看不出skewX()方法的本质原理。其实skewX()方法变形原理是这样的：由于我给元素限定了高度为100px，而skewX()方法是沿着X轴方向倾斜。所以，只要倾斜角度不是180°，元素都会保持100px的高度。同时为了保持倾斜，只能沿着X轴拉长本身。

由此我们可以总结：

(1)skewX()方法会保持高度，沿着X轴倾斜；

(2)skewY()方法会保持宽度，沿着Y轴倾斜；

(3)skew(x,y)方法会先按照skewX()方法倾斜，然后按照skewY()方法倾斜；

transform:skewY(30deg);

-webkit-transform:skewY(30deg); /*兼容-webkit-引擎浏览器*/

-moz-transform:skewY(30deg); /*兼容-moz-引擎浏览器*/

当采用上述代码时，在浏览器预览效果如下：

学过点基本数学的人都知道，位移、旋转和倾斜都不会改变四边形的面积。skew()方法可能比较少用。不过用的好的话，会让你的网页美观动感，但是用得不好的话，则将是一大败笔。