1. 程式人生 > >CSS3景深、三維變換屬性及旋轉三維立方體的實現

CSS3景深、三維變換屬性及旋轉三維立方體的實現

場景 htc 學歷 ati light range frame 焦距 說道

瀏覽器坐標系

在講正式語法之前,首先需要了解瀏覽器坐標系
這需要我們把瀏覽器界面想象成一個立體的場景

技術分享

這是網上流傳很廣的瀏覽器坐標系圖片
從左到右的方向是瀏覽器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) {
    background-color: lightcoral;
    transform: rotateY(-90deg) translateZ(100px);
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76

大功告成
這樣我們就會得到如下酷炫的三維立方體

技術分享

註意在3D變換transform中,旋轉與位移函數的順序不同,元素展現的位置是不同的
這是因為元素的坐標軸是隨著我們變換而變化的

上面的代碼如果有不明白的地方,可以拷貝到瀏覽器進行調試
整體的思路就是

  1. 設置舞臺元素(perspective:xxxpx)
  2. 設置動畫容器(transform-style:preserve-3d)
  3. 通過旋轉、位移調整動畫子元素的位置
  4. 對動畫容器應用動畫效果

最後我們通過這個正方體來加深三維變換相關屬性的理解
backface-visibility
添加樣式前的正方體

技術分享

現在我們來添加樣式

.stage .three-d-box>li {
    ......
    backface-visibility: hidden;
}
  • 1
  • 2
  • 3
  • 4

技術分享

大家來找茬
可以看到背對我們的元素全部看不見了
這就是backface-visibility: hidden;的作用

還有一些旋轉、縮放、平移的屬性這裏我就不再測試了
大家可以打開控制臺自己體會一下,和2D中的用法是類似的

CSS3景深、三維變換屬性及旋轉三維立方體的實現