3D動畫展示--3D圖片旋轉展示

3D圖片旋轉展示

下面是6個div放置6張周圍旋轉的圖,html如下

<section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>

下面是css樣式,body樣式爲 perspective: 1000px;添加透視效果

body {
    perspective: 1000px;
}

section裏面放置裏面的一張圖和設置3d透視

section {
    margin: 100px auto;
    width: 450px;
    height: 300px;
    background: url(untitled/2.jpg) no-repeat;
    transform-style: preserve-3d;/*設置3d透視*/
    position: relative;
    transition: 5s linear;/*過渡效果*/
}

設置div樣式,脫離文檔流

section div {
    width: 450px;
    height: 300px;
    background: url(untitled/7.jpg) no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
}

section添加僞類:hover,鼠標進入盒子旋轉

section:hover {
    transform: rotateY(360deg);
}

下面爲周邊旋轉的6張圖片的位置

section div:nth-child(1) {
    transform: rotateY(0deg) translateZ(500px);
}
section div:nth-child(2) {
    transform: rotateY(60deg) translateZ(500px);
}
section div:nth-child(3) {
    transform: rotateY(120deg) translateZ(500px);
}
section div:nth-child(4) {
    transform: rotateY(180deg) translateZ(500px);
}
section div:nth-child(5) {
    transform: rotateY(240deg) translateZ(500px);
}
section div:nth-child(6) {
    transform: rotateY(300deg) translateZ(500px);
}

完成!