CSS3中的3D轉換與2D轉換類似，只是在2D的x軸與y軸的基礎上增加了z軸，同時增加了透視等屬性。

在頁面中，座標系如下圖所示

透視perspective

在2D平面上產生近大遠小的視覺立體，但是其效果只是二維的。若想產生3D效果（3D投影到2D平面上）則需要利用透視屬性，透視的單位是px，透視其實就是視距，及人眼到螢幕的距離，也就是下圖中的d

對於同樣的z，d越小成象越小。透視要加在被觀察元素的父元素上。

translateZ()

translateZ會改變盒子的z軸，z越大，則離人眼越近，成象越大。

div[class^=box]{
            float:left;
            background-color: skyblue;          
            width: 200px;
            height:200px;
            border:black 5px solid;
            margin:50px;
        }
        .box2{
            transform:translateZ(50px);
        }
        .box3{
            transform:translateZ(-50px);
        }
 

沿x軸旋轉rotateX()

div[class^=box]{
            background-color: skyblue;          
            width: 200px;
            height:200px;
            border:black 5px solid;
            margin:0 auto;
        }
        .box2{
            transform:rotateX(45deg);
        }
        .box3{
            transform:rotateX(-45deg);
        }
 

實現效果:

沿y軸旋轉rotateY()

div[class^=box]{
            background-color: skyblue;          
            width: 200px;
            height:200px;
            border:black 5px solid;
            margin:0 auto;
        }
        .box2{
            transform:rotateY(45deg);
        }
        .box3{
            transform:rotateY(-45deg);
        }
 

實現效果:

沿z軸旋轉rotateZ()

div[class^=box]{
            background-color: skyblue;          
            width: 200px;
            height:200px;
            border:black 5px solid;
            margin:0 auto;
        }
        .box2{
            transform:rotateZ(45deg);
        }
        .box3{
            transform:rotateZ(-45deg);
        }

實現效果:

可以看出在2D平面上的rotate就是繞著z軸旋轉

沿著指定向量方向旋轉rotate3d()

rotate3d共有4個引數，前3個引數是x，y，z的向量，第4個引數是旋轉的角度

div[class^=box]{
            background-color: skyblue;          
            width: 200px;
            height:200px;
            border:black 5px solid;
            margin:0 auto;
        }
        .box2{
            transform:rotate3d(1,0,1,45deg);
        }
        .box3{
            transform:rotateZ(1,1,1,45deg);
        }

實現效果:

transform-style 屬性

若一個父盒子的子盒子已經定義了3D轉換，此時如果要對父盒子進行3D轉換，則需要對父盒子設定transform-style，才能使被轉換的子元素保留其3D轉換。

transform-style的預設值為flat(子元素將不保留其 3D 位置)，可以將父盒子的transform-style改為preserve-3d,即可保證子元素也保留3D轉換

.fa-box {
            position: relative;        
            margin: 100px auto;
            width: 200px;
            height: 200px;
            transform:rotateY(45deg);
            transform-style:preserve-3d;//保留子元素3D轉換
        }

        div[class^=box] {
            position:absolute;
            left:0;
            top:0;
            width: 100%;
            height: 100%;
            border: black 5px solid;
           
        }
        .box1{
            background-color:red;
            transform:rotateX(45deg);
            z-index: 1;
        }
        .box2{
            background-color: blue;
        }

.fa-box {
           /*........*/
            transform-style:flat;//不保留子元素3D轉換
           /*........*/
        }