這次帶給大家3D相簿效果的實現，實現3D相簿效果的注意事項有哪些，下面就是實戰案例，一起來看一下。
本文利用CSS3屬性來寫一個實例，話不多說，先直接看看效果。
因為前面已經講解過一些屬性的用法，這篇文章不再贅述，只記錄這個實例的編碼過程。項目代碼最最後。
佈局
直接看html佈局：
<p class="my-container"> <!-- 大容器 --> <p class="photo-wrap"> <!-- 舞台 --> <p class="container"> <!-- 相册容器 --> <p class="img img01"></p> <p class="img img02"></p> <p class="img img03"></p> <p class="img img04"></p> <p class="img img05"></p> <p class="img img06"></p> <p class="img img07"></p> <p class="img img08"></p> <p class="img img09"></p> </p> </p> </p>
樣式
大容器
最外層的大容器依實際情況定義樣式即可。
.my-container {
width: 800px;
height: 500px;
margin: 20px auto;
}舞台元素
perspective屬性用來啟動一個3D空間，使其子元素都會獲得透視效果（使用了3D變換的元素，此實例中也就是相簿容器元素）。
.photo-wrap {
perspective: 800px;
width: 800px;
}相簿容器
相簿容器的transform-style: preserve-3d;樣式，表示所有子元素在3D空間中呈現。
.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;
}現在瀏覽器看看效果：
#右上圖可以看出，現在每張圖片都固定在同一個位置。很明顯不是我們想要的效果。但是想要達到我們預期的效果，又要怎麼改變呢？
現在這些圖片都在容器的最中心點以平面的形式展現的，要想形成一個圓形，就要用到旋轉屬性（因為要繞著Y軸旋轉，所以是rotateY）了。
這裡一共有9張圖，所以以360/9=40度為單位來分別對每張圖進行旋轉。
.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);
}增加旋轉之後，再看看效果：
#我們發現這些圖片不在一個平面了，但是都擠在了一起，我們試著把每張圖片都往自己的前方(translateZ)移動300像素，看看會發生什麼事。
.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);
}增加旋轉和移動之後的效果：
# 至此，就已經達到我們預期的效果了。把每個圖片標籤加上喜歡的照片，就OK！
動畫
想要讓這個相簿動起來，加上一個動畫就好了。
@keyframes rotateY360 {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}然後給"相簿容器"container元素添加動畫屬性：
animation: rotateY360 15s ease-in-out infinite;
最終，大功告成:
以上是3D相簿效果的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！
