樣式

大容器

最外層的大容器根據(jù)實際情況定義樣式即可。

    .my-container {        
        width: 800px;
        height: 500px;
        margin: 20px auto;
    }

舞臺元素

perspective屬性用來激活一個3D空間，使其子元素都會獲得透視效果（使用了3D變換的元素，此實例中也就是相冊容器元素）。

    .photo-wrap {
        perspective: 800px;
        width: 800px;
    }

相冊容器

相冊容器的transform-style: preserve-3d;樣式，表示所有子元素在3D空間中呈現(xiàn)。

    .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;
    }

現(xiàn)在瀏覽器看看效果：

右上圖可以看出，現(xiàn)在每張圖片都固定在同一個位置。很明顯不是我們想要的效果。但是想要達到我們預(yù)期的效果，要怎么改變呢？

現(xiàn)在這些圖片都在容器的最中心點以平面的形式展現(xiàn)的，要想形成一個圓形，就要用到旋轉(zhuǎn)屬性（因為要繞著Y軸旋轉(zhuǎn)，所以是rotateY）了。

這里一共有9張圖，所以按360/9=40度為單位來分別對每張圖進行旋轉(zhuǎn)。

    .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);
    }

增加旋轉(zhuǎn)之后，再看看效果：

我們發(fā)現(xiàn)這些圖片不在一個平面了，但是都擠在了一起，我們試著把每張圖片都向自己的前方(translateZ)移動300像素，看看會發(fā)生什么。

    .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);
    }

 增加旋轉(zhuǎn)和移動之后的效果：

 至此，就已經(jīng)達到我們預(yù)期的效果了。把每個圖片標簽加上喜歡的照片，就OK啦！

動畫

想要讓這個相冊動起來，加一個動畫就好了。

    @keyframes rotateY360 {
        from {
            transform: rotateY(0deg);
        }
        to {
            transform: rotateY(360deg);
        }
    }

然后給"相冊容器"container元素添加動畫屬性：

 animation: rotateY360 15s ease-in-out infinite;

最終，大功告成:

感謝各位的閱讀！關(guān)于“怎么使用CSS3實現(xiàn)一個3D相冊”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！