使用CSS3實現(xiàn)一個3D相冊效果實例
我要評論第一篇主要列出了一些常用或經(jīng)典的CSS3技巧和方法；第二篇是一個用CSS3實現(xiàn)的立方體實例，詳細(xì)講解了3D旋轉(zhuǎn)和transform等屬性。
本文再來利用CSS3屬性來編寫一個實例，話不多說，先直接看看效果。
因為前面已經(jīng)講解過一些屬性的用法，此篇文章不再贅述，只記錄這個實例的編碼過程。項目代碼最最后。
布局
直接看html布局：
<div class="my-container"> <!-- 大容器 -->
<div class="photo-wrap"> <!-- 舞臺 -->
<div class="container"> <!-- 相冊容器 -->
<div class="img img01"></div>
<div class="img img02"></div>
<div class="img img03"></div>
<div class="img img04"></div>
<div class="img img05"></div>
<div class="img img06"></div>
<div class="img img07"></div>
<div class="img img08"></div>
<div class="img img09"></div>
</div>
</div>
</div>
樣式
大容器
最外層的大容器根據(jù)實際情況定義樣式即可。
.my-container {
width: 800px;
height: 500px;
margin: 20px auto;
}
舞臺元素
perspective屬性用來激活一個3D空間，使其子元素都會獲得透視效果（使用了3D變換的元素，此實例中也就是相冊容器元素）。
.photo-wrap {
perspective: 800px;
width: 800px;
}
相冊容器
相冊容器的transform-style: preserve-3d;樣式，表示所有子元素在3D空間中呈現(xiàn)。
.container {
width: 800px;
height: 500px;
margin: 0 auto;
position: relative;
transform-style: preserve-3d;
}
單個元素
.img {
width: 200px;
height: 118px;
line-height: 118px;
text-align: center;
position: absolute;
top: 160px;
left: 300px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.9) inset;
background: pink;
}
現(xiàn)在瀏覽器看看效果：
右上圖可以看出，現(xiàn)在每張圖片都固定在同一個位置。很明顯不是我們想要的效果。但是想要達到我們預(yù)期的效果，要怎么改變呢？
現(xiàn)在這些圖片都在容器的最中心點以平面的形式展現(xiàn)的，要想形成一個圓形，就要用到旋轉(zhuǎn)屬性（因為要繞著Y軸旋轉(zhuǎn)，所以是rotateY）了。
這里一共有9張圖，所以按360/9=40度為單位來分別對每張圖進行旋轉(zhuǎn)。
.img01 {
transform: rotateY(0deg);
}
.img02 {
transform: rotateY(40deg);
}
.img03 {
transform: rotateY(80deg);
}
.img04 {
transform: rotateY(120deg);
}
.img05 {
transform: rotateY(160deg);
}
.img06 {
transform: rotateY(200deg);
}
.img07 {
transform: rotateY(240deg);
}
.img08 {
transform: rotateY(280deg);
}
.img09 {
transform: rotateY(320deg);
}
增加旋轉(zhuǎn)之后，再看看效果：
我們發(fā)現(xiàn)這些圖片不在一個平面了，但是都擠在了一起，我們試著把每張圖片都向自己的前方(translateZ)移動300像素，看看會發(fā)生什么。
.img01 {
transform: rotateY(0deg) translateZ(300px);
}
.img02 {
transform: rotateY(40deg) translateZ(300px);
}
.img03 {
transform: rotateY(80deg) translateZ(300px);
}
.img04 {
transform: rotateY(120deg) translateZ(300px);
}
.img05 {
transform: rotateY(160deg) translateZ(300px);
}
.img06 {
transform: rotateY(200deg) translateZ(300px);
}
.img07 {
transform: rotateY(240deg) translateZ(300px);
}
.img08 {
transform: rotateY(280deg) translateZ(300px);
}
.img09 {
transform: rotateY(320deg) translateZ(300px);
}
增加旋轉(zhuǎn)和移動之后的效果：
至此，就已經(jīng)達到我們預(yù)期的效果了。把每個圖片標(biāo)簽加上喜歡的照片，就OK啦！
動畫
想要讓這個相冊動起來，加一個動畫就好了。
@keyframes rotateY360 {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
然后給"相冊容器"container元素添加動畫屬性：
animation: rotateY360 15s ease-in-out infinite;
最終，大功告成:
源碼下載地址：demo
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
- 這篇文章主要為大家詳細(xì)介紹了CSS3制作酷炫的三維相冊效果的具體代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-01
js+css實現(xiàn)上下翻頁相冊特效,相冊可以從上方或者下方隨意切換，是一款非常實用的幻燈片特效源碼。2015-08-27
基于jQuery+CSS3實現(xiàn)拼圖效果的相冊插件源碼
今天我們要來分享一款很酷的jQuery相冊插件，首先相冊中的圖片會以一定的角度傾斜放置在頁面上，點擊圖片縮略圖就可以展開圖片，并且圖片是由所有縮略圖拼接而成2015-01-21
HTML5+CSS3實現(xiàn)圖片可傾斜擺放的動畫相冊效果源碼
今天我們又要來分享一個CSS3動畫相冊，這款相冊的特點是圖片可以任意角度的傾斜擺放2015-01-06
jQuery+CSS3實現(xiàn)的適用商城商品列表的相冊特效源碼
是一段實現(xiàn)了適應(yīng)于各大商城使用的商品列表代碼，該段代碼最大的特效在于，鼠標(biāo)懸浮商品圖片上時，圖片的外框會發(fā)生變化，本段代碼適應(yīng)于所有網(wǎng)頁使用，有需要的朋友們可以2014-12-17
div+css實現(xiàn)相冊列表鼠標(biāo)經(jīng)過下方彈出文字說明動態(tài)特效源碼
div+css實現(xiàn)相冊列表鼠標(biāo)經(jīng)過下方彈出文字說明動態(tài)特效源碼，是一段依靠純DIV+CSS實現(xiàn)的代碼，本款代碼實現(xiàn)了，鼠標(biāo)懸停圖片時，圖片縮小并在圖片下方彈出相關(guān)文字說明，需2014-11-11
這是一款CSS3+jQuery實現(xiàn)的對角線淡入相冊代碼，圖片會以對角的形式從左上到右下淡入，點擊小圖可大圖預(yù)覽，支持鍵盤左右方向鍵翻頁。2014-08-07
jquery/CSS3實現(xiàn)的相冊圖片加載進度條特效源碼
這是一款jQuery+CSS3實現(xiàn)的相冊圖片加載進度條特效源碼，加載圖片過程中在頁面頂部出現(xiàn)藍色的進度條，右上角有不停轉(zhuǎn)動的loading效果，可以點擊按鈕加載更多圖片，結(jié)合jQue2014-07-24
基于jQuery/CSS3實現(xiàn)的動畫相冊圖片瀏覽插件源碼
這是一款帶有動畫特效的jQuery相冊插件源碼，由于CSS3特性的利用，當(dāng)我們點擊圖片瀏覽的時候，縮略圖就會以淡入淡出的動畫效果消失，然后出現(xiàn)原始圖片。同時你也可以點擊左2014-07-09
jQuery與CSS3實現(xiàn)相冊圖片濾鏡效果瀏覽插件源碼
這是一款基于jQuery和CSS3實現(xiàn)的超酷相冊瀏覽插件，在鼠標(biāo)滑過相冊圖片的縮略圖時，圖片即會產(chǎn)生濾鏡效果，顏色由灰色變成彩色，同時圖片的周圍也會產(chǎn)生不錯的陰影效果。在2014-06-17
