CSS3-transform3D

CSS3 3D位移

在CSS3中3D位移主要包括两种函数translateZ()和translate3d()。translate3d()函数使一个元素在三维空间移动。这种变形的特点是,使用三维向量的坐标定义元素在每个方向移动多少。其基本语法如下:

translate3d(tx,ty,tz)

其属性值取值说明如下:

  • tx:代表横向坐标位移向量的长度;
  • ty:代表纵向坐标位移向量的长度;
  • tz:代表Z轴位移向量的长度。此值不能是一个百分比值,如果取值为百分比值,将会认为无效值。

当z轴值越大时,元素也离观看者更近,从视觉上元素就变得更大;反之其值越小时,元素也离观看者更远,从视觉上元素就变得更小。

在CSS3中3D位移除了translate3d()函数之外还有translateZ()函数。translateZ()函数的功能是让元素在3D空间沿Z轴进行位移,其基本使用语法如下:

translate(t)

取值说明如下:

  • t:指的是Z轴的向量位移长度。

使用translateZ()函数可以让元素在Z轴进行位移,当其值为负值时,元素在Z轴越移越远,导致元素变得较小。反之,当其值为正值时,元素在Z轴越移越近,导致元素变得较大。

translateZ()函数在实际使用中等同于translate3d(0,0,tz)。仅从视觉效果上看,translateZ()和translate3d(0,0,tz)函数功能非常类似于二维空间的scale()缩放函数,但实际上完全不同。translateZ()和translate3d(0,0,tz)变形是发生在Z轴上,而不是X轴和Y轴。当使用3D变形,能够在一Z轴上移动一个元素确实有很大的好处,比如说在创建一个3D立方体的盒子之时。

CSS3 3D缩放

CSS3 3D变形中的缩放主要有scaleZ()和scale3d()两种函数,当scale3d()中X轴和Y轴同时为1,即scale3d(1,1,sz),其效果等同于scaleZ(sz)。通过使用3D缩放函数,可以让元素在Z轴上按比例缩放。默认值为1,当值大于1时,元素放大,反之小于1大于0.01时,元素缩小。其使用语法如下:

scale3d(sx,sy,sz)

其取值说明如下:

  • sx:横向缩放比例;
  • sy:纵向缩放比例;
  • sz:Z轴缩放比例;
scaleZ(s)

其取值说明如下:

  • s:指定元素每个点在Z轴的比例。

scaleZ(-1)定义了一个原点在Z轴的对称点(按照元素的变换原点)。

scaleZ()和scale3d()函数单独使用时没有任何效果,需要配合其他的变形函数一起使用才会有效果。

CSS3 3D旋转

到目前为止,我们已经讨论了如何让一个元素在平面上进行顺时针或逆时针旋转。在三维变形中,我们可以让元素在任何轴旋转。为此,CSS3新增三个旋转函数:rotateX()、rotateY()和rotateZ()。

使用rotateX()函数允许一个元素围绕X轴旋转;rotateY()函数允许一个元素围绕Y轴旋转;最后rotateZ()函数允许一个元素围绕Z轴旋转。接下来我们简单的了解一下这三个旋转函数。

rotateX()函数指定一个元素围绕X轴旋转,旋转的量被定义为指定的角度;如果值为正值,元素围绕X轴顺时针旋转;反之,如果值为负值,元素围绕X轴逆时针旋转。其基本语法如下:

rotateX(a)

其中a指的是一个旋转角度值,其值可以是正值也可以是负值。

rotateY()函数指定一个元素围绕Y轴旋转,旋转的量被定义为指定的角度;如果值为正值,元素围绕Y轴顺时针旋转;反之,如果值为负值,元素围绕Y轴逆时针旋转。其基本语法如下:

rotateY(a)

其中a指的是一个旋转角度值,其值可以是正值也可以是负值。

rotateZ()函数和其他两个函数功能一样的,区别在于rotateZ()函数指定一个元素围绕Z轴旋转。其基本语法如下:

rotateZ(a)

rotateZ()函数指定元素围绕Z轴旋转,如果仅从视觉角度上看,rotateZ()函数让元素顺时针或逆时针旋转,并且效果和rotate()效果等同,但他不是在2D平面的旋转。

在三维空间里,除了rotateX()、rotateY()和rotateZ()函数可以让一个元素在三维空间中旋转之外,还有一个属性rotate3d()函数。在3D空间,旋转有三个程度的自由来描述一个转动轴。轴的旋转是由一个[x,y,z]向量并经过元素原点。其基本语法如下:

rotate3d(x,y,z,a)

rotate3d()中取值说明:

  • x:是一个0到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值;
  • y:是一个0到1之间的数值,主要用来描述元素围绕Y轴旋转的矢量值;
  • z:是一个0到1之间的数值,主要用来描述元素围绕Z轴旋转的矢量值;
  • a:是一个角度值,主要用来指定元素在3D空间旋转的角度,如果其值为正值,元素顺时针旋转,反之元素逆时针旋转。

面介绍的三个旋转函数功能等同:

  • rotateX(a)函数功能等同于rotate3d(1,0,0,a)
  • rotateY(a)函数功能等同于rotate3d(0,1,0,a)
  • rotateZ(a)函数功能等同于rotate3d(0,0,1,a)

CSS3 3D倾斜

倾斜是二维变形,不能在三维空间变形。元素可能会在X轴和Y轴倾斜,然后转化为三维,但它们不能在Z轴倾斜。

CSS3 3D变形兼容性

3D变形在实际使用这时同样需要添加各浏览器的私有属性,并且有个别属性在某些主流浏览器中并未得到很好的支持:

  • IE10+中3D变形部分属性未得到很好的支持;
  • Firefox10.0至Firefox15.0版本的浏览器,在使用3D变形时需要添加私有属性-moz-,但从Firefox16.0+版本开始无需添加浏览器私有属性;
  • Chrome12.0+版本中使用3D变形时需要添加私有属性-webkit-;
  • Safari4.0+版本中使用3D变形时需要添加私有属性-webkit-;
  • Opera15.0+版本才开始支持3D变形,使用之里需要添加私有属性-webkit-;
  • 移动设备中iOS Safari3.2+、Android Browser3.0+、Blackberry Browser7.0+、Opera Mobile14.0+、Chrome for Android25.0+都支持3D变形,但在使用时需要添加私有属性-webkit-;Firefox for Android19.0+支持3D变形,但无需添加浏览器私有属性。

多重变形

在CSS3中,不管是2D变形还是3D变形,我们都可以使用多重变形,他们之间使用空格分隔,具体的语法如下:

transform: <transform-function>  <transform-function> *

其中transfrom-function是指CSS3中的任何变形函数

转载自:http://www.w3cplus.com/css3/css3-3d-transform.html

时间: 2024-10-10 02:08:50

CSS3-transform3D的相关文章

CSS3 3D变形效果

CSS3 3D变形效果 CSS3 transform3D变形 transform的含义是:改变,使-变形:转换 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换,你们发现3D变形的功能和2D变换的功能相当类似.CSS3中的3D变换主要包括以下几种功能函数: 3D位移:CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数: 3D旋转:CSS3中的3D旋转主要包括rotateX().rotateY().rotateZ()和rotate3d()四个功能函数

常用的HTML5、CSS3新特性能力检测写法

伴随着今年10月底HTML5标准版的发布,未来使用H5的场景会越来越多,这是令web开发者欢欣鼓舞的事情.然而有一个现实我们不得不看清,那就是IE系列浏览器还占有一大部分市场份额,以IE8.9为主,windows8.1的用户已经用上了IE10/11,而考虑我国的国情,IE6.7依然存留不少.在我们放手用HTML5开发的时候,新特性支持度检测就是必不可少的了.一种方式是用navigator.userAgent或navigator.appName来检测浏览器类型和版本,不过这种方式不是很可靠,浏览器

基于CSS3的3D旋转效果

自从有了html5和css3,好多以前只能想想的华丽效果都可以上手实现了.3D 转换(个人认为3D变换更贴切^)就是其中之一.关于3D转换,可以阅读CSS3 3D transform变换,不过如此,文中对3D转换进行了形象.生动.详细的阐述.在这里,只和大家讨论怎么利用3D转换来实现立体及其旋转效果,例如: 好吧,废话不多说,上代码! 1.页面代码 1 <div class="translate3D_test"> 2 <ul class="cube"

css3动画效果小结

css3的动画功能有以下三种: 1.transition(过度属性) 2.animation(动画属性) 3.transform(2D/3D转换属性) 下面逐一进行介绍我的理解: 1.transition:<过渡属性名称> <过渡时间> <过渡模式> 如-webkit-transition:color 1s; 等同于: -webkit-transition-property:color; -webkit-transition-duration:1s; 多个属性的过渡效果

css3实现色子自动翻转效果

原文:css3实现色子自动翻转效果 css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的规律,代码如下: <body> <div id="outer"> <div id="group"> <div class="page" id="page1">.</div>

CSS3 transform属性 附上demo

参考http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ 用法 实例 刚开始使用这个属性是因为工作的需要,制作H5动画页面,通过查具体用法也可以制作出各种小动画,比如平移,缩放,翻动,刚开始看到这些动画都很惊奇,居然短短写一小段东西就就可以完成js写一堆代码的动画了,然后看到别人家的CSS3动画,再次被教育做人了. 下面说说怎么使用 transform 定义 :t

【CSS3进阶】酷炫的3D旋转透视

之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研究学习了一下相关的 CSS3 属性.webpack 的 LOGO 动画效果乍看不是很难,深入了解之后,觉得内部其实大有学问,自己折腾了一番,做了一系列相关的 CSS3 动画效果. 先上 demo ,没有将精力放在兼容上,请用 chrome 打开. 本文完整的代码,以及更多的 CSS3 效果,在我 g

一款基于css3的散子3D翻转特效

css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的规律,代码如下: <body> <div id="outer"> <div id="group"> <div class="page" id="page1">.</div> <div class=&q

JS框架_(JQuery.js)纯css3进度条动画

进度条动画效果: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="w

css,css3盒子水平垂直居中

垂直居中在面试中经常见到的题目.总结几种,希望大家多多指教. ....<sytle> .box{ width:100px; height:100px; border;1px solid red; position:relative;   //父集相对定位 } .box1{ width:50px; height:50px; border:1px solid #000; } </style><body> <div class="box"> &