网络编程
位置:首页>> 网络编程>> 网页设计>> 你需要知道的CSS3 动画技术[译](4)

你需要知道的CSS3 动画技术[译](4)

作者:神采飞扬 来源:前端观察 发布时间:2009-12-30 17:02:00 

标签:CSS3,动画,设计师

translate

这个名称“translate(转化)”有点容易误解。它事实上是一种使用X和Y坐标值定位元素的方法。

 

#nav{
 /* 这会将nav元素向左移动10像素并向下移动20像素 */
 -moz-transform: translate(10px, 20px);
 -webkit-transform: translate(10px, 20px); 
 -o-transform: translate(10px, 20px); 
}

浏览器支持

translate属性目前只被Firefox, Safari/Chrome和Oprea 10.5支持,而且还要使用浏览器的私有前缀-moz- 和-webkit-。

Skew

Skew也是一个很有用的transform功能,它可以将一个对象围绕着x和y轴按照一定的角度倾斜。这和rotate的旋转不一样,rotate只是旋转,而不会让元素的形状改变。skew会让一个元素的形状改变。skew有两个参数,分别代表x和y轴的倾斜度数

#nav{
 /* 这会将nav元素向左移动10像素并向下移动20像素 */
 -moz-transform: skew(30deg, -10deg);
 -webkit-transform: skew(30deg, -10deg); 
 -o-transform: skew(30deg, -10deg); 
}

浏览器支持

Skew属性目前只被Firefox, Safari/Chrome和Oprea 10.5支持,而且还要使用浏览器的私有前缀-moz- 和-webkit-。

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com