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. Grand Central Dispatch(GCD)编程基础

    GCD:线程 http://blog.csdn.net/nono_love_lilith/article/details/7829557

  2. C#中反射的使用(How to use reflect in CSharp)(2)

    在上一篇里,我们叨逼了好多如何获取到程序集里的对象,但是对象有了,还不知道怎么调,OK,下面开始干这个对象: 首先,我们对上一篇的对象做了一些修改,以适应多种情况: using System; usi ...

  3. Linux - CentOS 6.3 (x86_64)安装过程详细图解

    I:下载CentOS 6.3 楼主已经从CentOS官方公布下载列表当中整理出了2个在国内的下载地址,这样就不需要为访问墙外的龟速网络而费心了. 32位:下载地址1,下载地址2 64位:下载地址1,下 ...

  4. nginx配置ssl

    1.使用pfx证书配置ssl (http://www.heartlifes.com/archives/12/) .上传证书 .生成证书crt及key文件 openssl pkcs12 -in /usr ...

  5. 使用C#开发纽曼USB来电小秘书客户端小结

    在前面用C#开发完CRM的来电弹屏之后,有些客户有了新的要求,他们希望不但能够实现来电弹屏,更希望能够将呼入呼出的电话录音并上传到CRM服务器上,方便日后跟踪记录.于是便有了来电小秘书客户端的开发.  ...

  6. delphi 判断是否出现滚动条

    delphi 判断是否出现滚动条     if (GetWindowlong(Stringgrid1.Handle, GWL_STYLE) and WS_VSCROLL) <> 0 the ...

  7. [Ramda] Compose and Curry

    Curry: The idea of Curry is to spreate the data from the function. Using Curry to define the functio ...

  8. 关于AutoComplete整合

    AutoComplete应该不是很陌生了,网上也有好多开源的js.今天主要的不是研究Autocomplete这个js的实现.今天主要讲的是将这个js做成一插件.那么今天主要用到的 js插件jquery ...

  9. yii 隐藏index.php的步骤

    Apache 1.开启apache的mod_rewrite模块       去掉LoadModule rewrite_module modules/mod_rewrite.so前的“#”符号     ...

  10. javascript遍历数组

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...