防疫不防學，逆戰2020！
閑話少絮，切入正題：本文詳細講解css的3D常用屬性，及其實現立方體的兩種方式。
首先我要明確x、y、z坐標軸的方向如何：3D即是三維空間，在3D空間內一般使用3D坐標軸確定元素位置，那么x、y、z坐標軸的方向如何？如果以屏幕正中心為3D空間的原點，以原點水平向右的方向為x軸線正方向，以原點水平向下的方向為y軸正方向，以垂直於屏幕穿過原點由屏幕向外（向我們射來）的方向為z軸的正方向，這種x、y、z軸構成的空間為基礎，我們對元素的位置進行調整以達到我們需要的3D效果。
說起CSS的3D屬性，在平面中我們對元素進行位置平移、旋轉、縮放和傾斜，那么在3D中我們除了在x、y軸進行的操作外，增加了對z軸的操作。
3D變換的變形屬性：transform
一、3D平面位移：
1、transform：translate3d(參數1,參數2,參數3);
*沿x、y、z軸同時位移
參數1：x軸移動的距離（正值沿着x軸往右）
參數2：y軸移動的距離（正值沿着y軸往下）
參數3：z軸移動的距離（正值沿着z軸往外）
2、transform:translateX(參數)；
*單獨沿x軸進行位移
3、transform：translateY(參數)；
*單獨沿y軸進行位移
4、transform：translateZ(參數)；
*單獨沿z軸進行位移
二、3D旋轉
1、transform:rotateX(參數);
*參數為正值是繞着x軸順時針旋轉
2、transform:rotateY(參數);
*參數為正值是繞着y軸順時針旋轉
3、transform:rotateZ(參數);
*參數為正值是繞着z軸順時針旋轉
4、transform:rotate3d(x,y,z,a);
*繞着xyz軸同時旋轉
x,y,z取值為 0或1，當值為1時表示允許沿着該軸線旋轉，當值為零是表示不允許沿着該軸線旋轉，a的值是旋轉的度數。
在我們旋轉的過程中要注意一個問題，我們x、y、z軸的坐標原點在元素的中心，也即是元素默認的的變形原點，當然變形原點可以通過transform-origin:參數1 參數2;
進行設置，我們第二種立方體的實現方法就需要對變形原點進行改變再平移旋轉實現的，請看第二種實現方式給出的具體用法。
三、3D縮放
transform:scale3d(x,y,z)；*元素整體縮放
transform:scaleX();*沿着x軸縮放
transform:scaleY();*沿着y軸縮放
transform:scaleZ();*沿着z軸縮放
縮放的參數的取值小於1表示縮小，大於1表示放大，等於1表示不盡興縮放。
在了解這些屬性后，還有最重要的一個步驟，讓該元素的父元素形成一個3D“舞台”，讓其子元素能夠在這個“舞台”中進行3d變換：transform-style:preserve-3d；
第一種實現立方體方法具體代碼如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>立方體1</title>
<style>
*{
margin:0;
padding:0;
}
.box{
width:200px;
height:200px;
/* 設置裝立方體的盒子在窗口居中 */
position:fixed;
left:0;right:0;
top:0;bottom:0;
margin:auto;
/* 設置盒子的偏轉角度以便觀察立方體的3d效果 */
transform:rotateX(45deg) rotateZ(45deg) rotateY(-90deg);
/* 使父元素box形成3d空間，支持子元素的3d屬性設置 */
transform-style: preserve-3d;
background-color: pink;
}
.box div{
width:200px;
height:200px;
text-align: center;
line-height:200px;
font-size: 80px;
font-weight:bolder;
color:#fff;
/* 使box下的所有div都定位到box左上角，重疊 */
position:absolute;
left:0;
top:0;
/* 是div透明度為50% */
opacity: 0.5;
}
/* 此時的con1--con6都重疊在box里面，我們開始進行位置的調整，使形成立方體 */
.con1{
background:lightblue;
/* 沿z軸正方向位移100p'x ，作為正面*/
transform:translateZ(100px);
}
.con2{
background:lightcoral;
/* 沿z軸負方向位移100像素，並且繞Y軸旋轉180度，背面 */
transform:translateZ(-100px) rotateY(180deg);
}
.con3{
background:lightgray;
/* 同理，立方體的頂 */
transform:translateY(-100px) rotateX(90deg);
}
.con4{
background:lightskyblue;
/* 立方體的底面 */
transform:translateY(100px) rotateX(-90deg);
}
.con5{
background:lightgoldenrodyellow;
/* 立方體的左側面 */
transform:translateX(-100px) rotateY(-90deg);
}
.con6{
background:lightyellow;
/* 立方體的右側面 */
transform:translateX(100px) rotateY(90deg);
}
</style>
</head>
<body>
<div class="box">
<div class="con1">1</div>
<div class="con2">2</div>
<div class="con3">3</div>
<div class="con4">4</div>
<div class="con5">5</div>
<div class="con6">6</div>
</div>
</body>
</html>
第二種實現立方體方法具體代碼如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>立方體2</title>
<style>
*{
margin:0;
padding:0;
}
.box{
width:300px;
height:300px;
position:fixed;
left:0;right:0;
top:0;bottom:0;
margin:auto;
/* 3D的空間 */
transform-style: preserve-3d;
/* 為了方便觀察讓3D舞台轉動角度 */
transform:rotateX(20deg) rotateY(30deg);
}
.box div{
width:300px;
height:300px;
text-align: center;
line-height:300px;
font-size: 100px;
font-weight:bolder;
color:#fff;
/* 讓6個面全部定位在父元素里面 */
position:absolute;
left:0;top:0;
opacity: 0.5;
}
.con1{
background:blue;
/* 直接讓第一個面繞着右側的Y軸轉90deg */
/* 改變變形原點 */
transform-origin:right center;
transform:rotateY(90deg);
}
.con2{
background:red;
/* 讓第二個面繞着左側的Y軸轉90deg */
/* 改變變形原點 */
transform-origin:left center;
transform:rotateY(-90deg);
}
.con3{
background:pink;
/* 讓第三個面繞着上面的X軸轉90deg */
/* 改變變形原點 */
transform-origin: center top;
transform:rotateX(90deg);
}
.con4{
background:seagreen;
/* 讓第四個面繞着下面的X軸轉90deg */
/* 改變變形原點 */
transform-origin:center bottom;
transform:rotateX(-90deg);
}
.con5{
background:sienna;
/* 讓第五個面往前位移300px */
transform:translateZ(300px);
}
.con6{
background:#000;
/* 讓第六個面 旋轉180 朝外顯示 */
transform:rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="con1">1</div>
<div class="con2">2</div>
<div class="con3">3</div>
<div class="con4">4</div>
<div class="con5">5</div>
<div class="con6">6</div>
</div>
</body>
</html>
實現的立方體效果：
