使用CSS3實現一個3D相冊

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呀！謝謝～