码迷，mamicode.com
首页 > Web开发 > 详细

CSS3 3D Transform

时间：2015-10-21 17:13:04      阅读：175      评论：0      收藏：0      [点我收藏+]

标签：


三维变换使用基于二维变换的相同属性，如果您熟悉二维变换，你们发现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 {
    width: 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);
}




效果如下所示：


技术分享


从上图的效果可以看出，当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);
}




效果如下：


技术分享


效果再次证明了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旋转


到目前为止，我们已经讨论了如何让一个元素在平面上进行顺时针或逆时针旋转。在三维变形中，我们可以让元素在任何轴旋转。为此，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 {
    width: 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
标签：
原文地址：http://www.cnblogs.com/wzzl/p/4898232.html

                

                

                    

                        

                            

                                

                                    踩

                                

                                    (0)

                            

                            

                                

                                    赞

                                

                                    (0)

                            

                        

                        

                            

                                    
                                
                            

                        

                    

                    

                        举报
                    

                    
                    

                        

                            评论 一句话评论（0）
                        

                        

                            
                            

                                
                            

                        

                        

                            

                            

                                

                                

                                

                                    
                                

                            

                            

                                登录后才能评论！
                                
                            

                            

                        

                    

                

                
            

        

        

            
            





            
            


    

        

            分享档案

        

            更多>
        

    

    

        
                
                    2021年07月29日
                    (22)

            
                
                    2021年07月28日
                    (40)

            
                
                    2021年07月27日
                    (32)

            
                
                    2021年07月26日
                    (79)

            
                
                    2021年07月23日
                    (29)

            
                
                    2021年07月22日
                    (30)

            
                
                    2021年07月21日
                    (42)

            
                
                    2021年07月20日
                    (16)

            
                
                    2021年07月19日
                    (90)

            
                
                    2021年07月16日
                    (35)

            
    




            


    

        
周排行

        

            mamicode.com排行更多图片

        

            更多

    

    

        
    




            
        

        

        

    

    
    

    

        

            友情链接
        

        

            兰亭集智  
			国之画  
			百度统计   
			 站长统计  
			阿里云  
			chrome插件  
			新版天听网
        

    





    

        

            关于我们 - 联系我们 - 留言反馈
        

        

            © 2014 mamicode.com
            版权所有   联系我们:gaon5@hotmail.com
        

        

            迷上了代码！