CSS3 扭曲skew()skewx()skewy()应用实例

　　使形状或文字扭曲，之前只能在像Photoshop这样的设计软件里实现；自CSS3新增扭曲属性skew后，CSS也能使网页中的对象（如 div、ul li 或文字等）扭曲。扭曲既可在X轴又可在Y轴，所以skew又可细分为skewx和skewy，前者控制对象在X轴扭曲，后者控制对象在Y轴扭曲。

　　skew的语法规则比较简单，只需设置一个扭曲角度即可。下面先介绍skewx()、skewy()和skew()的语法规则，再一一列举一个具体的应用实例。

 

　　一、对象扭曲语法规则

　　1、skewx语法规则

　　 skewx(<angle>)

　　 skewx 设置对象在X轴的扭曲，表达式中的 <angle>，是设置对象扭曲的角度，如 50度。值得注意的是，不能设置为90度和180度，否则无效。

 

　　2、skewy语法规则

　　skewy(<angle>)

　　skewy 设置对象在Y轴的扭曲，表达式中的 <angle>，同样是设置对象扭曲的角度，如 60度；也不能设置为90度和180度，否则无效。

 

　　3、skew语法规则

　　skew(<angle>[, <angle> ? ])

　　skew 用于设置对象的斜切扭曲，第一个 <angle> 设置对象在X轴的扭曲，第二个 <angle> 设置对象在Y轴的扭曲。第二个 <angle> 可以省略，如果省略，则默认值为0。

 

　　二、skewx()、skewy()和skew()应用实例

　　1、skewx()应用实例

　　html代码：

　　<div class="skewx">transform:skewx(30deg);</div>

　　CSS样式：

　　.skewx{transform:skewx(30deg); margin-top:10px;border:1px solid #ab9595;width:200px;height:100px;background-color:#e3e2e0; padding:10px;}

　　效果图：

　　从效果图中可以看出，div与其中的文字都在X轴扭曲了30度。

 

　　2、skewy()应用实例

　　html代码：

　　<div class="skewy">transform:skewy(60deg);</div>

　　CSS样式：

　　.skewy{transform:skewy(60deg); margin-top:10px;border:1px solid #ab9595;width:200px;height:100px;background-color:#e3e2e0; padding:10px;}

　　效果图：

 

　　上图显示，div及其文字都在Y轴扭曲了60度，原本平放的长方形已经竖起来斜立着了。

 

　　3、skew()应用实例

　　html代码：

　　<div class="skew">transform:skew(30deg, 60deg);</div>

　　CSS样式：

　　.skew{transform:skew(30deg, 30deg); margin-top:10px;border:1px solid #ab9595;width:200px;height:100px;background-color:#e3e2e0; padding:10px;}

　　效果图：

 

　　把 skey 设置为在X轴和Y轴都扭曲30度，与例2中的变化又有些区别。