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 ...
随机推荐
- Linux中监控命令top命令使用方法详解
收集了两篇关于介绍Linux中监控命令top命令的详细使用方法的文章.总的来说,top命令主要用来查看Linux系统的各个进程和系统资源占用情况,在监控Linux系统性能方面top显得非常有用,下面就 ...
- javascript判断NaN
功能: isNaN() 函数用于检查其参数是否是非数字值. 语法: isNaN(x) x 必需.要检测的值. 返回值: 如果 x 是特殊的非数字值 NaN(或者能被转换为这样的值),返回的值就是 tr ...
- Tomcat参数配置
一.调整JVM参数 JAVA_OPTS= -server -Xms256m -Xmx1024m 注: -server: 启用服务器模式 一定要作为第一个参数,如果CPU多,服务器机建议使用此项 -Xm ...
- 新网注册域名如何转向其他(如花生壳)DNS(不会报错,已经转入成功)
最近在玩域名,发现相比较来说,新网的域名注册费用相对廉价好多. 但是我以前是用花生壳的,用惯了花生壳,就觉得新网的域名管理界面很不适应,并不是新网的不好,而是习惯了花生壳. 那么如何将新网注册的域名D ...
- Unity3D之Mecanim动画系统学习笔记(十):Mecanim动画的资源加载相关
资源加载是必备的知识点,这里就说说Mecanim动画的资源如何打包及加载. 注意,Unity4.x和Unity5.x的AssetBundle打包策略不一样,本笔记是基于Unity4.x的AssetBu ...
- 一个序列是否可能是push序列的pop序列
输入:两个序列A.B,A作栈的push序列,判断B是否可能是A的pop序列. #include<iostream> #include<stack> using namespac ...
- 在DWZ框架中整合kindeditor复文本框控件
今天上午在DWZ框架中整合kindeditor复文本框控件,发现上传图片是老是提示 “上传中,请稍候...”,上网查看别人说可能是文件路径问题,在想以前在其他项目中用这个控件一直没问题,到这里怎么会出 ...
- 解决 DCEF3 在 BeforePopup 事件中打开新窗体的问题
此问题的解决方案从 https://groups.google.com/forum/#!topic/delphichromiumembedded/xzshOr-pjnU 获得. procedure T ...
- C#的WebBrowser操作frame如此简单
刚学c#不久,也不太懂什么IHTMLDocument.IHTMLDocument2.IWebBrowser2等等.自己琢磨了好久,终于知道了怎么用WebBrowser操作frame和iframe. 1 ...
- C++ AfxBeginThread
计算从1+2+3...+100000=? 关键点 CWinThread* AfxBeginThread( AFX_THREADPROC pfnThreadProc, LPVOID pParam, in ...