你需要知道的CSS3 动画技术[译](2)
作者:神采飞扬 来源:前端观察 时间:2009-12-30 17:02:00
Rotate
transform属性有很多用法,其中一个就是translate(旋转)。translate就是基于角度转动一个对象并可用于内联元素和块级元素,它可以实现很酷的效果。
#nav{ -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }
请注意在IE8中(非标准模式)它需要你写成“-ms-filter”而不是“filter”。
浏览器支持
浏览器对translate的支持令人惊奇的广泛。在上面的CSS片段中,我们直接加上-webkit-和-moz-前缀然后将#nav元素旋转-90度。
相当简单吧?唯一的问题是对于一个相当重要的设计元素,如果IE不支持,很多设计师就会不情愿使用它。
幸运的是,IE有这方面的滤镜:图形旋转滤镜。它可以有4个旋转值:0, 1, 2,和3。你将不会获得和Webkit和Gecko一样的精密控制,但是至少在一定程度上保持统一(甚至IE6)。虽然这个滤镜只支持4个值,显得有些鸡肋,但是对于IE来说,聊胜于无吧。
另外,非常值得一提的是,Opera在前几天发布了Opera 10.50 pre版本,声称支持CSS3 的transition和transform。只是还是需要使用私有属性,也就是要使用前缀 -o-
标签:CSS3,动画,设计师
0
投稿
猜你喜欢
matplotlib中legend位置调整解析
2023-07-17 03:00:44
将python字符串转化成长表达式的函数eval实例
2022-08-25 18:27:23
防盗链接ASP函数
2011-03-07 11:02:00
Python数据结构之双向链表的定义与使用方法示例
2023-06-29 06:20:45
flask-script模块的具体使用
2022-04-08 10:53:34
JS闭包经典实例详解
2024-05-09 10:20:27
Python3内置模块之base64编解码方法详解
2021-04-01 15:45:24
jenkins配置python脚本定时任务过程图解
2023-11-12 12:57:15
Python类继承及super()函数使用说明
2023-12-06 19:23:07
Python3中map()、reduce()、filter()的用法详解
2024-01-03 01:27:23
Python实现二维有序数组查找的方法
2021-04-15 21:31:38
如何将python文件打包成exe可运行文件
2022-06-29 19:01:17
Mysql数据库手动及定时备份步骤
2024-01-27 10:43:15
Keras使用ImageNet上预训练的模型方式
2021-03-01 10:08:51
如何理解Python中包的引入
2021-08-14 11:42:31
Python自定义函数计算给定日期是该年第几天的方法示例
2021-07-25 02:38:10
Linux下mysql5.6.24(二进制)自动安装脚本
2024-01-21 12:36:42
Python中SOAP项目的介绍及其在web开发中的应用
2022-09-15 15:36:45
详解Python的条件语句
2021-03-04 08:27:56
PHP中常用的数组操作方法笔记整理
2023-06-06 15:17:12