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) {