使用CSS3實現一個3D相簿

標籤：auto   photo   執行個體demo   for   spec   contain   blob   wrap   過程   

CSS3系列我已經寫過兩篇文章，感興趣的同學可以先看一下CSS3初體驗之奇技淫巧，CSS3 3D立方體效果－transform也不過如此

第一篇主要列出了一些常用或經典的CSS3技巧和方法；第二篇是一個用CSS3實現的立方體執行個體，詳細講解了3D旋轉和transform等屬性。

本文再來利用CSS3屬性來編寫一個執行個體，話不多說，先直接看看效果。3D相簿執行個體DEMO

因為前面已經講解過一些屬性的用法，此篇文章不再贅述，只記錄這個執行個體的編碼過程。項目代碼已上傳至github，項目代碼github地址

布局

直接看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;

最終，大功告成：

代碼已經上傳至github。項目代碼github地址，喜歡的童鞋們不妨點個star呀！謝謝～

使用CSS3實現一個3D相簿