CSS3 3D Transform


三维变换使用基于二维变换的相同属性，如果您熟悉二维变换，你们发现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位移主要包括两种函数translateZ()和translate3d()。translate3d()函数使一个元素在三维空间移动。这种变形的特点是，使用三维向量的坐标定义元素在每个方向移动多少。其基本语法如下：


translate3d(tx,ty,tz)



其属性值取值说明如下：


    

  •  tx：代表横向坐标位移向量的长度；
    • 

  •  ty：代表纵向坐标位移向量的长度；
    • 

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



一起来看一个简单的实例，加深对translate3d()函数的理解：


HTML




<div class="stage s1">
    <div class="container">
        <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="70" height="100" />
        <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="70" height="100" />
    </div>
</div>
<div class="stage s2">
    <div class="container">
        <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="70" height="100" />
        <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="70" height="100" />
    </div>
</div>




CSS




.stage {
     300px;
    height: 300px;
    float: left;
    margin: 15px;
    position: relative;
    background: url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg) repeat center center;

    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -ms-perspective: 1200px;
    -o-perspective: 1200px;
    perspective: 1200px;
}
.container {
    position: absolute;
    top: 50%;
    left: 50%;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.container img {
    position: absolute;
    margin-left: -35px;
    margin-top: -50px; 
}
.container img:nth-child(1){
    z-index: 1;
    opacity: .6;
}
.s1 img:nth-child(2){
    z-index: 2; 
    -webkit-transform: translate3d(30px,30px,200px);
    -moz-transform: translate3d(30px,30px,200px);
    -ms-transform: translate3d(30px,30px,200px);
    -o-transform: translate3d(30px,30px,200px);
    transform: translate3d(30px,30px,200px);
}
.s2 img:nth-child(2){
    z-index: 2; 
    -webkit-transform: translate3d(30px,30px,-200px);
    -moz-transform: translate3d(30px,30px,-200px);
    -ms-transform: translate3d(30px,30px,-200px);
    -o-transform: translate3d(30px,30px,-200px);
    transform: translate3d(30px,30px,-200px);
}




效果如下所示：


CSS3 3D Transform


从上图的效果可以看出，当z轴值越大时，元素也离观看者更近，从视觉上元素就变得更大；反之其值越小时，元素也离观看者更远，从视觉上元素就变得更小。


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




translate(t)




取值说明如下：


    

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



使用translateZ()函数可以让元素在Z轴进行位移，当其值为负值时，元素在Z轴越移越远，导致元素变得较小。反之，当其值为正值时，元素在Z轴越移越近，导致元素变得较大。在上例的基础上，我们稍加变化一下，将translate3d()函数换成translateZ()函数：




.s1 img:nth-child(2){
    z-index: 2; 
    opacity: .6;
    -webkit-transform: translateZ(200px);
    -moz-transform: translateZ(200px);
    -ms-transform: translateZ(200px);
    -o-transform: translateZ(200px);
    transform: translateZ(200px);
}
.s2 img:nth-child(2){
    z-index: 2; 
    -webkit-transform: translateZ(-200px);
    -moz-transform: translateZ(-200px);
    -ms-transform: translateZ(-200px);
    -o-transform: translateZ(-200px);
    transform: translateZ(-200px);
}




效果如下：


CSS3 3D Transform


效果再次证明了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变形中的缩放主要有scaleZ()和scale3d()两种函数，当scale3d()中X轴和Y轴同时为1，即scale3d(1,1,sz)，其效果等同于scaleZ(sz)。通过使用3D缩放函数，可以让元素在Z轴上按比例缩放。默认值为１，当值大于１时，元素放大，反之小于１大于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 Transform


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到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
    • 

  •  y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
    • 

  •  z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
    • 

  •  a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。
    • 



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


    

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

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

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



接下来通过一个简单的实例，来实战一下3D旋转的运用：


HTML




<div class="stage s1">
    <div class="container">
        <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="140" height="200" />
        <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="140" height="200" />
    </div>
</div>
<div class="stage s2">
    <div class="container">
        <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="140" height="200" />
        <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="140" height="200" />
    </div>
</div>
<div class="stage s3">
    <div class="container">
        <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="140" height="200" />
        <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="140" height="200" />
    </div>
</div>
<div class="stage s4">
    <div class="container">
        <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="140" height="200" />
        <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="140" height="200" />
    </div>
</div>




CSS




.stage {
     300px;
    height: 300px;
    float: left;
    margin: 15px;
    position: relative;
    background: url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg) repeat center center;

    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -ms-perspective: 1200px;
    -o-perspective: 1200px;
    perspective: 1200px;
}
.container {
    position: absolute;
    top: 50%;
    left: 50%;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.container img {
    position: absolute;
    margin-left: -70px;
    margin-top: -100px; 
}
.container img:nth-child(1){
    z-index: 1;
    opacity: .6;
}
.s1 img:nth-child(2){
    z-index: 2; 
    -webkit-transform:rotateX(45deg);
    -moz-transform:rotateX(45deg);
    -ms-transform:rotateX(45deg);
    -o-transform:rotateX(45deg);
    transform:rotateX(45deg);
}
.s2 img:nth-child(2){
    z-index: 2; 
    -webkit-transform:rotateY(45deg);
    -moz-transform:rotateY(45deg);
    -ms-transform:rotateY(45deg);
    -o-transform:rotateY(45deg);
    transform:rotateY(45deg);
}
.s3 img:nth-child(2){
    z-index: 2; 
    -webkit-transform:rotateZ(45deg);
    -moz-transform:rotateZ(45deg);
    -ms-transform:rotateZ(45deg);
    -o-transform:rotateZ(45deg);
    transform:rotateZ(45deg);
}
.s4 img:nth-child(2){
    z-index: 2; 
    -webkit-transform:rotate3d(.6,1,.6,45deg);
    -moz-transform:rotate3d(.6,1,.6,45deg);
    -ms-transform:rotate3d(.6,1,.6,45deg);
    -o-transform:rotate3d(.6,1,.6,45deg);
    transform:rotate3d(.6,1,.6,45deg);
}




效果如下所示：


CSS3 3D Transform







        

	      

	    

	  

	  

	    
      
        【推广】
        免费学中医，健康全家人
      
	  

    

    

          原文地址：https://www.cnblogs.com/wzzl/p/4898232.html