当前位置: 代码迷 >> HTML/CSS >> css3卡通属性系列之transform细讲skew扭曲
  详细解决方案

css3卡通属性系列之transform细讲skew扭曲

热度:127   发布时间:2012-09-23 10:28:11.0
css3动画属性系列之transform细讲skew扭曲

上一篇讲了scale,这一次我们再细讲一下skew.

?

下面我们从3个方面开始介绍:

?

1、skew(<angle>[,[angle]]) X|Y轴上的斜切变换

?

?

  • 第一个参数是水平方向扭曲角度
  • 第二个参数是垂直方向扭曲角度可选参数,如果没有设置,和X周一样的角度进行变形
  • 元素中心为基点,可以通过transform-origin来改变。
transform:skew(45deg,10deg);
?

?

2、skewX(<angle>) 按给定的角度沿X轴进行斜切变换。

?

  • 在水平方向(X轴)进行扭曲变形。
  • 以中心为基点,可以通过transform-origin来改变。
transform:skewX(45deg);
?

3、skewY(<angle>)按给定的角度沿Y轴进行斜切变换。

?

  • 在垂直方向(Y轴)进行扭曲变形。
  • 以中心为基点,可以通过transform-origin来改变。

?

transform:skewY(20deg);
?

?

最后我们看看兼容性写法

?

?

.test{
  -moz-transform:skew(45deg,10deg);
  -webkit-transform:skew(45deg,10deg);
  -o-transform:skew(45deg,10deg);
  background:url(img/i.png) no-repeat;	
  width:198px;
  height:133px;	 
}
?

?