CSS3系列之3D制作方法案例
我要評(píng)論一、序
博主最近這些天，突發(fā)奇想的想研究一下CSS3的東西，從而提升一下CSS的能力，在學(xué)習(xí)的過程中發(fā)現(xiàn)其實(shí)CSS3是一個(gè)挺復(fù)雜的東西，深入的研究，你可能會(huì)涉及到初中的光學(xué)理論來幫助理解一些概念，同時(shí)如matrix可能還需要你用大學(xué)學(xué)習(xí)的矩陣來進(jìn)行分析，因?yàn)檫@是本系列的第一篇文章，所以就從最好玩的開始介紹起，這樣也不至于讓大家失去了閱讀下去的興趣，同時(shí)寫這些文章的一個(gè)主要的原因是，CSS3挺復(fù)雜的，一方面整理一下自己的研究，方便日后重新的翻看，另一方面，也想幫助更多的讀者而來進(jìn)入CSS3這個(gè)世界，提高讀者們的見識(shí)，不要像博主以前一樣，以為會(huì)了幾個(gè)標(biāo)簽就好像CSS3的東西都會(huì)了一樣。
二、3D基礎(chǔ)概念理解
如果要說是3D的基礎(chǔ)概念，那么有一些屬性的理解是一定繞不過去的，首先我們就來談一談rotateX()、rotateY()、rotateZ()這幾個(gè)屬性
rotateX()、rotateY()、rotateZ()
rotateX():對(duì)應(yīng)的是3D模型中的X軸上的旋轉(zhuǎn)，傳入的參數(shù)如:rotateX(45deg)表示的是頁(yè)面繞X軸順時(shí)針旋轉(zhuǎn)45度
rotateX():對(duì)應(yīng)的是3D模型中的Y軸上的旋轉(zhuǎn)，傳入的參數(shù)如:rotateY(45deg)表示的是頁(yè)面繞Y軸順時(shí)針旋轉(zhuǎn)45度
rotateX():對(duì)應(yīng)的是3D模型中的Z軸上的旋轉(zhuǎn)，傳入的參數(shù)如:rotateZ(45deg)表示的是頁(yè)面繞Z軸順時(shí)針旋轉(zhuǎn)45度
對(duì)應(yīng)的模型如下：
注：以上模型圖的視角是+Z軸指向讀者的方向
說到這里還需要注意這幾個(gè)問題，就是頁(yè)面(圖中的菱形表示的就是頁(yè)面)與坐標(biāo)軸的位置是相對(duì)位置，不是絕對(duì)位置，也就是說頁(yè)面位置一改變，坐標(biāo)軸的位置也隨著頁(yè)面一起改變，這個(gè)你現(xiàn)在可能還不是很理解這個(gè)說法的作用，但是不用著急，如果弄個(gè)例子的話，例子會(huì)涉及到另外的一個(gè)屬性的使用，所以先在這里買一個(gè)關(guān)子。二、旋轉(zhuǎn)到與視線對(duì)其的方向的時(shí)候會(huì)出現(xiàn)消失的現(xiàn)象
HTML代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo1</title>
</head>
<style type="text/css">
#test{
height:200px;
width:200px;
position:absolute;
margin-top:100px;
margin-left:100px;
}
#test div{
height:200px;
width:200px;
background:lightblue;
-webkit-transition: all .6s;
}
#test div:hover{
-webkit-transform:rotateX(90deg);
}
</style>
<body>
<div id="test">
<div></div>
</div>
</body>
</html>
效果展示：
看到了沒有，這個(gè)出現(xiàn)空白是因?yàn)?，?dāng)與你的視線是平行的時(shí)候，因?yàn)槠矫媸菦]有厚度的所以你看到的就是空白
旋轉(zhuǎn)方面的屬性我們已經(jīng)講解了，接下來我們就來講解一下，3D平移的屬性，3D的平移屬性分別有：translateX()、tanslateY()、tanslateZ()這三個(gè)方法
分別就是對(duì)應(yīng)的是X、Y、Z軸方向上面的平移，這個(gè)具體參照上面的坐標(biāo)圖，很容易理解的，這個(gè)就不必在此多此一舉了，以translateX()為例來講解一下使用方法，如果是要使平面在X軸正方向上面移動(dòng)45像素，這個(gè)時(shí)候可以這樣寫 translateX(45px)，其他的使用方法一樣，接下來就結(jié)合一下上面所提到的一個(gè)坐標(biāo)軸的相對(duì)位置問題來接一個(gè)例子，也作為translate這一系列屬性的一個(gè)DEMO
HTML代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo1</title>
</head>
<style type="text/css">
#test{
height:200px;
width:200px;
position:absolute;
margin-top:100px;
margin-left:100px;
}
#test #div2{
height:200px;
width:200px;
background:lightcoral;
-webkit-transition: all .6s;
position:relative;
-webkit-transform:rotateX(-80deg) translateZ(200px);
}
#test:hover #div2{
-webkit-transform: rotateX(80deg);
}
</style>
<body>
<div id="test">
<div id="div2"></div>
</div>
</body>
</html>
效果展示：
由于id=test定義的是margin-left等于margin-top的，但是由于div2中進(jìn)行了移動(dòng)的操作，造成了初始化頁(yè)面紅色矩形的margin-top>margin-left，但是細(xì)心的你有沒有發(fā)現(xiàn)，參照上圖的3D坐標(biāo)軸，要使平移的應(yīng)該是設(shè)置rotateY()才對(duì)，怎樣這里是用過設(shè)置rotateZ()來實(shí)現(xiàn)的，哈哈，想看結(jié)果的請(qǐng)看下面分析
其實(shí)我們可以這樣分析：
圖像中應(yīng)用了rotateX(-90deg)——也就是說明了圖像目前是與我們的視線是平行的，從3D圖中我們可以看出，Z軸總是與頁(yè)面的關(guān)系是垂直關(guān)系，所以這個(gè)時(shí)候的Z軸就變成了變換之前的Y軸，所以變換后我們直接操作Z軸就可以起到操作Y軸的作用
三、3D知識(shí)點(diǎn)進(jìn)階
看到這里我默認(rèn)讀者都已經(jīng)理解了上面的基礎(chǔ)知識(shí)點(diǎn)了，畢竟上面的知識(shí)點(diǎn)還算是比較好上手的，接下來就是3D屬性中一些比較難以理解的屬性的講解，這里會(huì)使用通俗的說法來進(jìn)行說明、闡述觀點(diǎn)，如有錯(cuò)誤，希望各位同行指出
1、perspective
這個(gè)屬性具體要怎樣描述請(qǐng)自行百度，但是根據(jù)我個(gè)人對(duì)這個(gè)屬性的理解，這個(gè)屬性的功能就有點(diǎn)像把平行光設(shè)置為聚焦光一樣，具體請(qǐng)看下圖的分析
注：圖片比較難找，大家將就一下
從圖中我們可以知道這個(gè)屬性相當(dāng)于將默認(rèn)的平行光置換成焦點(diǎn)光，如果是像perspective:200px，這個(gè)我們可以認(rèn)為是光源離物體的距離是200px，這個(gè)數(shù)值如果是越大的話，那么等一下的物體呈現(xiàn)就會(huì)越小，就如圖中來講，如果是設(shè)置為200px會(huì)比設(shè)置為300px所呈現(xiàn)的書本的大小會(huì)更大些，但是如果是物體的Z軸(假設(shè)這個(gè)時(shí)候的物體沒有旋轉(zhuǎn)過)的數(shù)值大于大于焦點(diǎn)的距離，打個(gè)比方就是假設(shè)perspective:200px .math_book{-webkit-transform:translateZ(300px)},這個(gè)時(shí)候就會(huì)出現(xiàn)math_book在光源的后面，也就是光源沒有覆蓋到的地方，這個(gè)時(shí)候你是在頁(yè)面中什么效果都沒有呈現(xiàn)的，
這個(gè)時(shí)候不知道各位看官們還能不能理解這段話的意思呢!不懂沒有關(guān)系，下面通過一個(gè)示例來分析一下光源理論是怎樣得出來的
HTML代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo1</title>
</head>
<style type="text/css">
#test{
width:400px;
height:400px;
position:absolute;
margin-left:100px;
margin-top: 100px;
/* 光源設(shè)置為離頁(yè)面200像素的位置 */
perspective:200px;
}
#test1{
width:400px;
height:400px;
position:relative;
/* 相當(dāng)于指定一個(gè)3D的空間 */
transform-style:preserve-3d;
}
#div2{
width:400px;
height:400px;
position:relative;
background:lightcoral;
/* 指定變換效果，變換時(shí)間為1S */
-webkit-transition: all 1s;
}
#test #test1:hover #div2{
/* 繞Y軸旋轉(zhuǎn)180度 */
-webkit-transform: rotateY(180deg);
}
</style>
<body>
<div id="test">
<div id="test1">
<div id="div2"></div>
</div>
</div>
</body>
</html>
效果展示
注：圖片有點(diǎn)大，但是也是沒有辦法的
這個(gè)案例中有幾點(diǎn)在這里要說明，不知道大家知不知道為什么會(huì)出現(xiàn)旋轉(zhuǎn)的好像要與屏幕相撞的原因？其實(shí)這個(gè)是博主故意這樣做得，我在上面的例子中把光源的位置設(shè)置為200px但是我們從設(shè)置可以知道矩形的寬是400px,旋轉(zhuǎn)的Y軸位置默認(rèn)的是與Y軸平行，并且穿過中心點(diǎn)，所以我們也就知道了這個(gè)旋轉(zhuǎn)半圓的半徑是200px，所以這樣就導(dǎo)致了光源點(diǎn)與矩形在矩形旋轉(zhuǎn)到90度的時(shí)候相碰撞，所以這個(gè)時(shí)候，我們可以將光源點(diǎn)的位置設(shè)置的更遠(yuǎn)一些，比如說是500px或者是更大，但是這個(gè)時(shí)候我們應(yīng)該要注意一點(diǎn)就是，如果設(shè)置過大的話，會(huì)導(dǎo)致圖形在頁(yè)面中的呈現(xiàn)變小了
對(duì)了，我還沒有說明我的光源理論來的，不好意思，下面就來聊聊我自己的光源理論(理論是博主自己的心得來的，有錯(cuò)希望各位大神指出)，上圖
已知手電筒是發(fā)散的光源（即非平行光），如果這個(gè)時(shí)候有一個(gè)物體(圖中對(duì)應(yīng)的是BOOK)繞著Y軸在旋轉(zhuǎn)，，那么我們假設(shè)在這本書的后面有一面墻，那么墻最后呈現(xiàn)的效果是出現(xiàn)了一個(gè)菱形，這個(gè)與我們看到的GIF圖像在每幀位置上面相對(duì)應(yīng)。實(shí)際上，上面的圖像說到底也就是菱形的變換然后套接一個(gè)animate。如果是沒有設(shè)置perspective屬性，那么就會(huì)出現(xiàn)我說所的平行光的效果,平行光效果，請(qǐng)看下圖
相信大家都看出來是什么效果吧，就是平行光效果就是說：如果是平行光照射到物體上面，即使物體繞著Y軸旋轉(zhuǎn)，那么最后在頁(yè)面上呈現(xiàn)的效果也是一個(gè)矩形邊框的變
perspective屬性就說到這里了，在上面的例子中我們還提到了另外的一個(gè)屬性就是 transform-style:preserve-3d;這個(gè)屬性其實(shí)就相當(dāng)于創(chuàng)建一個(gè)3D的空間
我們這里就來假設(shè)一下，假設(shè)perspective對(duì)應(yīng)的是發(fā)散光源，transform-style對(duì)應(yīng)的是一個(gè)舞臺(tái)，如果舞臺(tái)是一個(gè)2維的也就是像電視一樣的，那么這樣最后也產(chǎn)生不來一個(gè)3D的效果，但是如果舞臺(tái)是一個(gè)3D，例如舞臺(tái)是一個(gè)京劇舞臺(tái)，那么這個(gè)3D的舞臺(tái)投影上就可以看到3維的變化，所以我們急需要perspective屬性來設(shè)置"光源"類型,也需要transform-style來設(shè)置一個(gè)投影的3D空間.
在使用perspective的時(shí)候我們需要注意的是如果把這個(gè)屬性加在某些具體元素上面并且旋轉(zhuǎn)的角度相同，那么這些元素所呈現(xiàn)的效果是相同的，這個(gè)正好可以用perspective類比為光源來解釋，如果在每個(gè)對(duì)象上面加上個(gè)一個(gè)光源，那么投影就是一樣的，但是如果是加在這些元素的父節(jié)點(diǎn)上面，那么元素所呈現(xiàn)的效果是不同的，這個(gè)的解釋是我們把光源加在這些元素上面，那么我們可以把這些元素看成是一個(gè)這些元素都在一個(gè)平面上面，那么因?yàn)橐驗(yàn)楣庠吹奈恢檬且欢ǖ?，但是每個(gè)元素在平面上面的位置不一樣，所以呈現(xiàn)的就是不同的效果(這個(gè)可能比較抽象難以理解，如果有疑問的話可以在后面留言)
perspective-orgin:這個(gè)屬性相當(dāng)于是設(shè)置坐標(biāo)的原點(diǎn)，因?yàn)槟J(rèn)的原點(diǎn)是在圖像的中心位置，但是有時(shí)候我們可能像旋轉(zhuǎn)的中心的位置變換一下，這個(gè)時(shí)候，這個(gè)屬性就可以滿足我們的需求
backface-visibility：這個(gè)屬性是用來設(shè)置3D的背景是不是透明的，選項(xiàng)有visible|hidden，默認(rèn)的是hidden
四、案例練習(xí)
先來看一下效果：
看起來很炫是不是，這個(gè)其實(shí)的制作原理就是按照我在上面提到的這些屬性去制作的，首先我們分析一下，在創(chuàng)建這個(gè)的時(shí)候，第一步我們要引入光源，然后是添加一個(gè)3D的舞臺(tái)，接著是把帶猴子的圖片放在垃圾桶圖片的下面并且邊緣相接，最后在這些圖片的父類定義一個(gè)動(dòng)畫，就是在鼠標(biāo)懸停的時(shí)候出發(fā)的動(dòng)作，這樣這個(gè)就制作完成了，對(duì)了在這個(gè)例子中圖片的尺寸最好要相同(里面這些圖是博主在網(wǎng)上找的)
具體的HTML代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3練習(xí)案例</title>
</head>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.light{
margin-top:200px;
margin-left: 200px;
width:310px;
height:100px;
position:absolute;
perspective:500px;
}
.light .stage{
position:relative;
width:310px;
height:100px;
transform-style:preserve-3d;
-webkit-transition: all 0.8s;
}
.light .stage .image1{
width:310px;
height:100px;
position:absolute;
-webkit-transform:translateZ(50px) ;
-webkit-transition: all 0.8s;
}
.light .stage .image2{
width:310px;
height:100px;
position:absolute;
-webkit-transition: all 0.8s;
-webkit-transform: rotateX(-90deg) translateZ(50px);
}
.light .stage:hover{
-webkit-transform: rotateX(90deg);
}
</style>
<body>
<div class="light">
<div class="stage">
<img class="image1" src="images/a.png" />
<img class="image2" src="images/b.jpeg" />
</div>
</div>
</body>
</html>
圖片我就不提供了，請(qǐng)自行百度上找
五、總結(jié)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
- 這篇文章主要為大家詳細(xì)分析了CSS3 3D制作實(shí)戰(zhàn)案例分析，更好的鞏固CSS3 3D的知識(shí)，理解3D的制作和實(shí)現(xiàn)原理,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-18