CSS3景深、三維變換屬性及旋轉三維立方體的實現
瀏覽器坐標系
在講正式語法之前，首先需要了解瀏覽器坐標系
這需要我們把瀏覽器界面想象成一個立體的場景
這是網上流傳很廣的瀏覽器坐標系圖片
從左到右的方向是瀏覽器x軸的正方向
從上到下的方向是瀏覽器y軸的正方向
而z軸正方向是面對於我們的
了解這個很重要，因為下面我們旋轉元素需要借助它來理解
3D旋轉
我們在平面中使用的旋轉只是單純的讓元素在平面旋轉一定角度
在三維旋轉中稍微要復雜一下
屬性當然還是用我們的transform
三維旋轉有下面三個函數分別對應三個維度的旋轉
- rotateX（xxdeg）
- rotateY（xxdeg）
- rotateZ（xxdeg）
rotateX是讓元素繞著x軸旋轉，角度越大，元素繞著x軸順時針旋轉
類似於我們的單杠運動
transform: rotateX(45deg);- 1
rotateY是讓元素繞著y軸旋轉，角度越大，元素繞著y軸順時針旋轉
類似於鋼管舞運動..
transform: rotateY(45deg);- 1
rotateZ是讓元素繞著z軸旋轉，角度越大，元素繞著z軸順時針旋轉
這就是我們在二維平面的旋轉，類似於轉盤
transform: rotateZ(45deg);- 1
其實3D旋轉還有一個合成的函數是rotate3d(num,num,num,deg)
用的不是很多，我就簡單說一下
參數並不是我們想那樣的3個角度值
而是三個數字一個角度值
前三個數字分別表示繞x、y、z軸旋轉的矢量值
最後一個表示在空間的旋轉角度，等價關系如下
rotate3d(1,0,0,xxdeg) <==> rotateX(xxdeg)
rotate3d(0,1,0,xxdeg) <==> rotateY(xxdeg)
rotate3d(0,0,1,xxdeg) <==> rotateZ(xxdeg)
3D位移與3D縮放
我們在2D中用到translateX()和translateY()在平面移動
3D中我們多了translateZ()允許我們沿著z軸平移
同樣可以使用合成函數translate3d(x,y,z)
註意前兩個值可以使用百分比形式，但是沿z軸平移的值只能使用長度值
同理我們的3D縮放
scaleX(num)、scaleY(num)、scaleZ(num)、scale3d(num,num,num)
至於它們的用法下面再通過例子來說
（3D的傾斜屬性是不存在的，換句話說，不存在skew3d函數）
透視/景深屬性perspective
景深這個名詞，維基百科是這樣就解釋的
景深（英語：Depth of field, DOF）景深是指相機對焦點前後相對清晰的成像範圍。在光學中，尤其是錄影或是攝影，是一個描述在空間中，可以清楚成像的距離範圍。雖然透鏡只能夠將光聚到某一固定的距離，遠離此點則會逐漸模糊，但是在某一段特定的距離內，影像模糊的程度是肉眼無法察覺的，這段距離稱之為景深。當焦點設在超焦距處時，景深會從超焦距的一半延伸到無限遠，對一個固定的光圈值來說，這是最大的景深。
（看到這裏，我的手默默的離開了鍵盤，仰天長嘆，心想，這到底要什麽樣的學歷才能看得懂）
我們可以這樣來理解
景深就是我們的肉眼距離顯示器的距離
景深越大，元素離我們越遠，效果就不好
在我們CSS3中，perspective用於激活一個3D空間
屬性值就是景深大小（默認none無景深）
有兩種用法
.stage {
perspective: 500px;
}- 1
- 2
- 3
應用景深的元素稱為“舞臺元素”
舞臺元素的所有後代元素都會受影響
（如果後代元素中也添加了perspective屬性，效果會疊加而不是覆蓋）
<div class="stage">
<div class="demo"></div>
</div>- 1
- 2
- 3
.stage {
width: 200px;
height: 200px;
border: 1px solid black;
margin: 100px auto;
}
.stage .demo {
width: 200px;
height: 200px;
background-color: orangered;
transform: rotateX(45deg);
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
在這個例子中，我們把內部元素繞x軸旋轉了45°後
由於他只是在二次元旋轉，所以我們根本看不出來它旋轉
但是我們現在加個景深
.stage {
width: 200px;
height: 200px;
border: 1px solid black;
margin: 100px auto;
perspective: 500px; /*增*/
}
.stage .demo {
width: 200px;
height: 200px;
background-color: orangered;
transform: rotateX(45deg);
} - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
這就相當於我們在舞臺元素的中心位置往裏看，這個子元素距離我們肉眼有500px
由於子元素的順時針旋轉，
元素上半部分離我們遠，所以看起來很小
元素下半部分離我們近，所以看起來稍大
這樣就會產生很強的立體感
剛才我說道我們的肉眼相當於在舞臺元素中心的位置
其實這個“眼睛”的位置是可以調整的
這用到了perspective-origin屬性
默認的屬性值就是 50% 50%
也就是舞臺元素的中心位置
我們可以嘗試調整視角
.stage {
width: 200px;
height: 200px;
border: 1px solid black;
margin: 100px auto;
perspective: 500px;
perspective-origin: 10px 10px; /*增*/
}
.stage .demo {
width: 200px;
height: 200px;
background-color: orangered;
transform: rotateX(45deg);
} - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
這就相當於在舞臺元素的距離原點（左上）10px，10px的位置往裏看
理解這個需要我們一定的空間立體感
註意：景深大小一定要比你的動畫元素大（我們不可能看到眼睛後面的東西）
景深的另一種用法，是應用在動畫元素（不是舞臺元素）變形的函數中
和其他變形函數寫在一起
.stage .demo {
......
transform: rotateX(45deg) perspective(100px);
}- 1
- 2
- 3
- 4
3D屬性transform-style
這個屬性指定了子元素如何在空間中展示
只有兩個屬性值：flat（默認）和preserve-3d
flat 表示所有子元素在2D平面呈現
preserve-3d 表示所有子元素在3D平面呈現
（prederve是保護、維持的意思，preserve-3d就是保持三維空間的意思）
當然如果我們想要3D的效果，就要使用 transform-style: preserve-3d;
這個屬性只是針對設置屬性元素的子元素如何展示
而對子元素的子元素無效
而且對於設置了overflow: hidden;的元素，設置3D效果會失效
道理很簡單，跳出了父元素平面的子元素無法顯示了，結果自然還是2D效果
應用於這個屬性的元素我們稱作“容器”
這個屬性我們下面通過一個例子再來體會
背面可見屬性backface-visibility
通過這個元素我們可以指定當元素背對我們時是否可見
只有兩個屬性值visibility（默認）和hidden
如果我們希望元素背對我們不可見
就這樣設置
.demo {
...
backface-visibility: hidden;
}- 1
- 2
- 3
- 4
下面我通過一個例子來把上面講到的屬性全部實踐一下
示例：旋轉的三維立方體
<div class="stage"> <!--舞臺元素，視角所在-->
<ul class="three-d-box"> <!--動畫容器，通過它來控制整個立方體-->
<li>?</li> <!--動畫元素，立方體的六個面-->
<li>?</li>
<li>?</li>
<li>?</li>
<li>?</li>
<li>?</li>
</ul>
</div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
ul { /*調整ul標簽的樣式，取消內邊距、外邊距，和“點”樣式*/
padding: 0;
margin: 0;
list-style-type: none;
}
.stage { /*設置舞臺元素在屏幕居中，設置合適的景深大小*/
position: relative;
width: 800px;
height: 800px;
margin: 100px auto;
perspective: 800px;
}
@keyframes move { /*設置動畫關鍵幀*/
0% {
transform: rotateX(0deg);
}
25% {
transform: rotateX(180deg);
}
50% {
transform: rotateX(360deg) rotateY(0deg);
}
75% {
transform: rotateX(360deg) rotateY(180deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg);
}
}
.stage .three-d-box { /*動畫容器居中在舞臺元素中間*/
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin: -100px 0 0 -100px;
transform-style: preserve-3d; /*設置3D屬性讓子元素三維空間呈現*/
animation: move 3s linear infinite; /*設置動畫*/
}
.stage .three-d-box>li { /*設置動畫子元素公共屬性*/
position: absolute;
width: 200px;
height: 200px;
left: 0;
top: 0;
font-size: 50px;
line-height: 200px;
text-align: center;
opacity: 0.5;
}
/*為了保證我們對立方體位置的控制，我們需要讓動畫容器在立方體的中間位置*/
.stage .three-d-box>li:nth-child(1) {
background-color: red;
transform: translateZ(-100px);
}
.stage .three-d-box>li:nth-child(2) {
background-color: greenyellow;
transform: translateZ(100px);
}
.stage .three-d-box>li:nth-child(3) {
background-color: cornflowerblue;
transform: rotateX(90deg) translateZ(100px);
}
.stage .three-d-box>li:nth-child(4) {
background-color: orangered;
transform: rotateX(-90deg) translateZ(100px);
}
.stage .three-d-box>li:nth-child(5) {
background-color: deeppink;
transform: rotateY(90deg) translateZ(100px);
}
.stage .three-d-box>li:nth-child(6)