你需要知道的CSS3 动画技术[译](4)
作者:神采飞扬 来源:前端观察 时间:2009-12-30 17:02:00
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-。
标签:CSS3,动画,设计师
0
投稿
猜你喜欢
PHP中集成PayPal标准支付的实现方法分享
2023-09-06 09:11:22
前端使用svg图片改色实现示例
2022-03-14 03:54:14
关于pip的安装,更新,卸载模块以及使用方法(详解)
2022-03-15 07:21:36
ORACLE LATERAL-SQL-INJECTION 个人见解
2009-03-04 10:34:00
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2023-11-11 06:41:39
pytorch transform数据处理转c++问题
2023-08-19 11:24:49
python3+PyQt5实现自定义分数滑块部件
2023-08-03 02:15:28
python保留小数位的三种实现方法
2021-09-05 22:36:09
发一个自己用的JS框架(试用版^_^)
2011-09-11 18:53:24
Python使用淘宝API查询IP归属地功能分享
2021-02-11 20:37:29
GoFrame glist 基础使用和自定义遍历
2024-05-28 15:23:26
golang语言中for循环语句用法实例
2024-04-23 09:41:21
详解JavaScript 高阶函数
2024-04-18 09:30:14
详解为什么说Golang中的字符串类型不能修改
2024-02-04 09:24:45
Hugo 游乐场内容初始化示例详解
2024-05-10 13:58:13
Python实现爬取需要登录的网站完整示例
2022-08-09 11:40:33
Web 2.0 框架发布
2008-03-25 09:40:00
深入理解Javascript中的观察者模式
2024-05-13 09:36:23
ASP函数过滤数组中重复数据方法
2010-01-02 20:32:00
Golang使用Gin框架实现HTTP上传文件过程介绍
2024-04-28 09:18:12