第一篇主要列出了一些常用或經典的CSS3技巧和方法；第二篇是一個用CSS3實現的立方體實例，詳細講解了3D旋轉和transform等屬性。
本文再來利用CSS3屬性來編寫一個實例，話不多說，先直接看看效果。
因為前面已經講解過一些屬性的用法，此篇文章不再贅述，只記錄這個實例的編碼過程。項目代碼最最后。
布局
直接看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>
樣式
大容器
最外層的大容器根據實際情況定義樣式即可。
.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;
最終，大功告成:
源碼下載地址：demo
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
