CSS3系列我已經寫過兩篇文章,感興趣的同學可以先看一下CSS3初體驗之奇技淫巧,CSS3 3D立方體效果-transform也不過如此
第一篇主要列出了一些常用或經典的CSS3技巧和方法;第二篇是一個用CSS3實現(xiàn)的立方體實例,詳細講解了3D旋轉和transform等屬性。
本文再來利用CSS3屬性來編寫一個實例,話不多說,先直接看看效果。3D相冊實例DEMO
因為前面已經講解過一些屬性的用法,此篇文章不再贅述,只記錄這個實例的編碼過程。項目代碼已上傳至github,項目代碼github地址
布局
直接看html布局:
<div class="my-container"> <!-- 大容器 --> <div class="photo-wrap"> <!-- 舞臺 --> <div class="conta