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转换,他们有何区别的更多相关文章

  1. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  2. css3 字体、2D转换、3D转换

    学习篇之CSS3 字体.2D转换.3D转换 一.字体 @font-face 将字体文件存放到 web 服务器上,通过CSS3 @font-face规则中定义,它会在需要时被自动下载到用户的计算机上. ...

  3. HTML CSS3中2D转换、3D转换、过渡效果总结

    一.CSS3 2D转换 通过 CSS3 转换,我们可以对元素进行移动.缩放.转动.拉长或拉伸. 特别注意,我们在使用css3动画效果时,必须给他们加相应的浏览器前缀,以便浏览器识别,让我们更好的去应用 ...

  4. 2D转换与3D转换的区别

    2D与3D的区别——2D 转换元素能够改变元素 x 和 y 轴.3D 转换元素还能改变其 Z 轴.

  5. css3 animate写的超炫3D转换

    上一篇中介绍了animate的基本的属性,这一篇讲的则是关于animate以及transforms的使用 <!DOCTYPE html><html lang="en&quo ...

  6. CSS3—— 2D转换 3D转换 过渡 动画

    2D转换 对元素进行移动.缩放.转动.拉长或拉伸 ————>  ————>   移动 顺时针旋转 扩大/缩小 倾斜 2D变换合并  3D转换 绕x轴 绕y轴 过渡 从一种样式逐渐改变为另一 ...

  7. IT兄弟连 HTML5教程 CSS3属性特效 2D变换1

    通过CSS3转换,能够对元素进行移动.缩放.转动.拉长或拉伸.它如何工作?转换是使元素改变形状.尺寸和位置的一种效果.CSS3转换包括2D转换和3D转换,本小结我们来了解2D变换的转换方法. 转换属性 ...

  8. CSS笔记(十二)CSS3之2D和3D转换

    参考:http://www.w3school.com.cn/css3/css3_2dtransform.asp 2D Transform 方法 函数 描述 matrix(n,n,n,n,n,n) 定义 ...

  9. CSS自学笔记(13):CSS3 2D/3D转换

    CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transfo ...

随机推荐

  1. VPN Gate Client v4.11-免費、無限流量VPN翻牆(跳板)軟體(使用教學)

    VPN Gate Client安裝教學 ▼把下載的檔案壓縮後,開啟安裝檔案. ▼接下來就是一般安裝步驟,下一步>下一步   ▼同意>下一步>下一步   ▼安裝目錄可以用預設的也可以自 ...

  2. python求3的倍数与和

    suqares=[] i=1 sum=0 while i<=100: i+=1 if i*3: sum=sum+i # print(i) suqares.append(i*3) # print( ...

  3. UdpClient的Connect究竟做了什么(转)

    最近在写一个音频通信的系统,因为需要还要处理其他事件,所以就自己设计底层的通信协议,用了不少底层的Socket编程(.Net Framework),搞清楚了不少细节问题. 先做一些铺垫工作.音频系统服 ...

  4. SmallDateTime时间范围检查

    SamllDataTime是SQL Server中的一种表达时间的类型, 精度不高但是省空间,具体的细节就查看一下MSDN的文档吧. http://msdn.microsoft.com/zh-cn/l ...

  5. 判断sqlserver临时表等临时资源是否存在

    if exists(select * from tempdb..sysobjects where id=object_id('tempdb..#TEMP'))  drop table #TEMP

  6. Hyper-V网络配置

    Hyper-V虚拟交换机类型应用: 外部虚拟网络: 可以实现虚拟机之间.虚拟机和物理机.虚拟机和外部网络的通信. 生产环境不勾选“允许管理操作系统共享此网络适配器”,勾选之后会为主机创建虚拟网卡,会实 ...

  7. Codeforces Round #333 (Div. 2) A. Two Bases 水题

    A. Two Bases Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/602/problem/ ...

  8. Android短信彩信收发流程(应用层)

    下图为ComposeMessageActivity中confirmSendMessageIfNeeded部分的信息发送流程.主要以接收者有效性的确认为主,然后转向sendMessage方法进行发送. ...

  9. 测试JS

    <html> <head> </head> <body> <script> function loadScript(url, callbac ...

  10. win7重新安装win7

    本方法适用于原本Win7系统下安装,无需U盘,非Ghost,简单几步操作之后与光盘安装过程一样,简便易操作,愿与和我一样有“洁癖”的朋友分享. 1.下载Win7原版光盘镜像,附下载地址: Win7旗舰 ...