CSS3变形之3D变形

三维变换使用基于二维变换的相同属性,3D变形的功能和2D变换的功能相当类似。CSS3中的3D变换主要包括以下几种功能函数:

  • 3D位移:CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数;

  • 3D旋转:CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数;

  • 3D缩放:CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数;

  • 3D矩阵:CSS3中3D变形中和2D变形一样也有一个3D矩阵功能函数matrix3d()。


CSS3 3D位移


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

translate3d(tx,ty,tz)

其属性值取值说明如下:

  • tx:代表横向坐标位移向量的长度;

  • ty:代表纵向坐标位移向量的长度;

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


  • CSS3变形之3D变形_第1张图片

translateZ()函数的功能是让元素在3D空间沿Z轴进行位移,其基本使用语法如下:

translateZ(t)

取值说明如下:

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

CSS3变形之3D变形_第2张图片

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

translateZ()函数仅让元素在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变形中的缩放主要有scale3d()和scaleZ()两种函数,当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()函数单独使用时没有任何效果,需要配合其他的变形函数一起使用才会有效果。下面我们来看一个实例,为了能看到scaleZ()函数的效果,我们添加了一个rotateX(45deg)功能:

.s1 img:nth-child(2){
    z-index: 2; 
    -webkit-transform: scaleZ(5) rotateX(45deg);
    -moz-transform: scaleZ(5) rotateX(45deg);
    -ms-transform: scaleZ(5) rotateX(45deg);
    -o-transform: scaleZ(5) rotateX(45deg);
    transform: scaleZ(5) rotateX(45deg);
}
.s2 img:nth-child(2){
    z-index: 2; 
    -webkit-transform: scaleZ(.25) rotateX(45deg);
    -moz-transform: scaleZ(.25) rotateX(45deg);
    -ms-transform: scaleZ(.25) rotateX(45deg);
    -o-transform: scaleZ(.25) rotateX(45deg);
    transform: scaleZ(.25) rotateX(45deg);
}

其效果如下所示:

CSS3变形之3D变形_第3张图片


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变形_第4张图片


CSS3 3D矩阵


CSS3中的3D矩阵要比2D中的矩阵复杂,从二维到三维,矩阵里头从3*3变成4*4。不过,本质上很多东西都与2D是一致的,只是复杂程度不一样而已。

3D矩阵即为透视投影

CSS3变形之3D变形_第5张图片

代码表示就是:

matrix3d(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1)

推算方法与2D矩阵均是类似的。


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

你可能感兴趣的:(前端开发专栏,css3)