CSS3如何实现2D转换和3D转换,他们有何区别
CSS3中2D3D技术的发展,带来了更丰富的视觉效果~他们的实现机理是怎样的呢?
1定义
2D:
能够对元素进行移动,缩放,转动,拉长或拉伸。
3D:
允许对元素进行格式化,在三维空间进行操作。元素改变形状,尺寸和位置。
2D方法:


matrix()方法把所有2D转换方法组合在一起,该方法需要六个参数,包含数学函数,可以实现旋转(angle),缩放(n),移动(x,y),倾斜(x-angle,y-angle)。
3D方法:

3Dtransform方法

浏览器支持:
2D:
IE10,Firefox,Opera支持,Chrome和Safari需要前缀-webkit-,IE9需要前缀-ms.
3D:
IE10,Firefox,Chrome和Safari需要前缀-webkit-,Opera不支持。
区别:
3D除了增添了少许2D没有的属性外,其他基本上是细化了2D的属性。
CSS3如何实现2D转换和3D转换,他们有何区别的更多相关文章
- CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)
CSS3边框: 1.CSS3圆角:border-radius 属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...
- css3 字体、2D转换、3D转换
学习篇之CSS3 字体.2D转换.3D转换 一.字体 @font-face 将字体文件存放到 web 服务器上,通过CSS3 @font-face规则中定义,它会在需要时被自动下载到用户的计算机上. ...
- HTML CSS3中2D转换、3D转换、过渡效果总结
一.CSS3 2D转换 通过 CSS3 转换,我们可以对元素进行移动.缩放.转动.拉长或拉伸. 特别注意,我们在使用css3动画效果时,必须给他们加相应的浏览器前缀,以便浏览器识别,让我们更好的去应用 ...
- 2D转换与3D转换的区别
2D与3D的区别——2D 转换元素能够改变元素 x 和 y 轴.3D 转换元素还能改变其 Z 轴.
- css3 animate写的超炫3D转换
上一篇中介绍了animate的基本的属性,这一篇讲的则是关于animate以及transforms的使用 <!DOCTYPE html><html lang="en&quo ...
- CSS3—— 2D转换 3D转换 过渡 动画
2D转换 对元素进行移动.缩放.转动.拉长或拉伸 ————> ————> 移动 顺时针旋转 扩大/缩小 倾斜 2D变换合并 3D转换 绕x轴 绕y轴 过渡 从一种样式逐渐改变为另一 ...
- IT兄弟连 HTML5教程 CSS3属性特效 2D变换1
通过CSS3转换,能够对元素进行移动.缩放.转动.拉长或拉伸.它如何工作?转换是使元素改变形状.尺寸和位置的一种效果.CSS3转换包括2D转换和3D转换,本小结我们来了解2D变换的转换方法. 转换属性 ...
- CSS笔记(十二)CSS3之2D和3D转换
参考:http://www.w3school.com.cn/css3/css3_2dtransform.asp 2D Transform 方法 函数 描述 matrix(n,n,n,n,n,n) 定义 ...
- CSS自学笔记(13):CSS3 2D/3D转换
CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transfo ...
随机推荐
- Arduino Due, Maple and Teensy3.0 的 W5200性能测试
开源平台中以太网连接方案里W5100是众所周知的,W5200正在此领域越来越受欢迎.这个测试结果是在Arduino Due(Atmel CortexM3-84Mhz), Maple(ST Cortex ...
- socket的shutdown与close
shutdown原型 int shutdown(int socket, int how); socket 指定socket的文件描述符 how 指定shutdown的类型 SHUT_RD 禁止读 ...
- 教你50招提升ASP.NET性能(二十三):StringBuilder不适用于所有字符串连接的场景;String.Join可能是
(41)StringBuilder is NOT the answer for all string concatenation scenarios; String.Join could be 招数4 ...
- cocos2d-x CCListView
转自:http://blog.csdn.net/onerain88/article/details/7641126 cocos2d-x 2.0 版更新了,把opengl 1.1 替换为opengl 2 ...
- Openfire服务器MySQL优化
Openfire服务器MySQL优化: [root@iZ28g4ctd7tZ ~]# mysql -u root -p XXXXX mysql> show processlist; +----- ...
- 下载discuz 6 论坛的附件
前段时间我下了个python脚本把emsky的附件全部下载了,之前是因为偶然发现emsky附件不登陆也能访问,直接访问一个url就行了. 后来发现大部分discuz6的论坛都有这个bug,我想是因为d ...
- 关于Python中的self
虽然我现在写过一些Python代码,但实际上几乎还没用过Class,而且一直觉得一个很别扭的事情是,Class中的函数都要写个参数self,虽然实例化调用的时候不需要. 当然,一开始就知道Python ...
- PP常用T-CODE
与BOM相关 CS00 BOM 菜单 BOM Menu CS01 生成物料 BOM Create Material BOM CS02 更改物料 BOM Change Material CS03 显示物 ...
- hibernate 实体关系映射笔记
@经常使用属性说明: @Entity:实体类 @Table:指定相应数据表 @Id:主键,使用能够为null值的类型,假设实体类没有保存到数据库是一个暂时状态 @Col ...
- null和空 not null
所谓的NULL就是什么都没有,连\0都没有,\0在字符串中是结束符,但是在物理内存是占空间的,等于一个字节,而NULL就是连这一个字节都没有.在 数据库里是严格区分的,任何数跟NULL进行运算都是NU ...