這次帶給大家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;
最終,大功告成:
##我相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章! 推薦閱讀:以上是3D相簿效果的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!