Zerlinda's Blog

总结CSS3变形transform属性

在网页设计中,css被习惯于理解为擅长表现静态样式,动态的元素必须借助于flash或javascript才可以实现,css3将来改变这一思维方式。css3除了增加很大革命性的创新功能外,还提供了对动画的支持,可以实现旋转,缩放,移动,倾斜和过渡效果等等,这些功能再一次证明了css3功能的强大和无限潜能。 css3实现元素变形的基础。来源于新增的transform属性,该元素可用于实现元素的旋转,缩放,移动,倾斜等效果。目前webkit引擎支持-webkit-transform私有属性,Mozilla Geckos引擎支持-moz-transform私有属性,Presto引擎支持-o-transform私有属性,IE浏览器支持-ms-transform私有属性。

Tips: transform属性的移动,缩放等都以自身为参考噢!

那么 css3 transform都有哪些常用属性?点击这里查看transform属性演示

transform的属性包括:rotate() / skew() / scale() / translate() ,分别还有x、y之分.比如:rotatex() 和 rotatey() ,以此类推。
1.rotate

transform:rotate(angle):

含义:通过接受一个单位为deg的旋转角度,对指定元素旋转一定的幅度,角度为正时为顺时针。

.demo_transform1{ 
  -webkit-transform:rotate(10deg); 
  transform:rotate(10deg) 
}

2.skew

transform:skew(angleX,angleY):

含义:定义元素在二维空间的倾斜变形。angleX,Y表示元素在空间XY轴上的倾斜角度,角度单位为deg。角度为正时为顺时针旋转。若Y省略,说明垂直方向上的倾斜角度默认为0deg。

.demo_transform2{ 
  -webkit-transform:skew(20deg);
  transform:skew(20deg); 
}

3.scale

transform:scale(x,y):

含义:实现元素在二维空间的缩放和翻转,两个参数值用来定义宽和高的缩放比例。x,y取值可谓整数、小数、负数,取值为负时,元素会被翻转。如果y省略,则垂直和水平方向缩放倍数相同。

.demo_transform3{ 
  -webkit-transform:scale(1.5); 
  transform:scale(1.5); 
}

4.translate

transform:translate(dx,dy):

含义:定义元素相对于原来坐标发生的偏移。xy分别表示元素在水平和垂直方向的位移。

.demo_transform4{
  -webkit-transform:translate(120px,0);
  transform:translate(120px,0)
 }

发表评论

电子邮件地址不会被公开。 必填项已用*标注