首頁  >  文章  >  web前端  >  3D相簿效果的實現

3D相簿效果的實現

php中世界最好的语言
php中世界最好的语言原創
2018-03-22 16:43:223841瀏覽

這次帶給大家3D相簿效果的實現,實現3D相簿效果的注意事項有哪些,下面就是實戰案例,一起來看一下。

本文利用CSS3屬性來寫一個實例,話不多說,先直接看看效果。

因為前面已經講解過一些屬性的用法,這篇文章不再贅述,只記錄這個實例的編碼過程。項目代碼最最後。

佈局

直接看html佈局

    <p class="my-container">  <!-- 大容器 -->
        <p class="photo-wrap">  <!-- 舞台 -->
            <p class="container">   <!-- 相册容器 -->
                <p class="img img01"></p>
                <p class="img img02"></p>
                <p class="img img03"></p>
                <p class="img img04"></p>
                <p class="img img05"></p>
                <p class="img img06"></p>
                <p class="img img07"></p>
                <p class="img img08"></p>
                <p class="img img09"></p>
            </p>
        </p>
    </p>

樣式

大容器

最外層的大容器依實際情況定義樣式即可。

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

最終,大功告成:

##我相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

CSS的居中佈局總結

左側固定,右側自適應的佈局方式

瀑布流佈局與無限載入圖片相簿效果
#

以上是3D相簿效果的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn