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
        
		

網(wǎng)友評論