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 ...
随机推荐
- TypeScript学习笔记(二):基本数据类型及数据转换
数据类型 我们来看看TypeScript中的基本数据类型都有哪些. boolean 布尔值,支持true和false. var isDone: boolean = false; 默认为undefine ...
- 无线路由器的“克隆MAC地址”是干什么作用的?
本文章转载:http://blog.sina.com.cn/s/blog_4c900d100102uysb.html 1.问题: 无线路由器的“克隆MAC地址”是干什么作用的?怎样使用? 2.使用背景 ...
- eclipse中异常的快捷键
选中你要try的代码,alt+shift+z 就会弹出一个菜单,里面有个try 选项
- Posting data to a HttpHandler greater then ~29MB gives a 404 error
1down votefavorite 1 I am testing a HttpHandler that accepts XML. It works fine when a small amount ...
- BZOJ 3555: [Ctsc2014]企鹅QQ hash
3555: [Ctsc2014]企鹅QQ Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/p ...
- SpringMVC4.2.4 xml配置
环境:1.基于spring4.2.4版本,也是spring当前(2016.2)最新的GA版本 2.maven 3.2.1 3.jdk1.7 xml配置1: web.xml <?xml versi ...
- delphi 18 屏蔽和替换 右键菜单
//屏蔽右键菜单procedure TForm1.ApplicationEvents1Message(var Msg: tagMSG; var Handled: Boolean);begin wi ...
- MySQL server version for the right syntax to use near ‘USING BTREE
转自:http://www.douban.com/note/157818842/ 有时导入mysql会提示如下错误: C:\Users\liqiang>mysql -uroot -paaaaaa ...
- iOS与日期相关的操作
// Do any additional setup after loading the view, typically from a nib. //得到当前的日期 注意week1是星期天 NSDat ...
- .net平台下C#socket通信(转)
上篇.net平台下C#socket通信(上)介绍了socket通信的基本原理及最基本的通信方式.本文在此基础上就socket通信时经常遇到的问题做一个简单总结,都是项目中的一些小问题,拿来此处便于下次 ...