简单的3D图片轮播dome

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>3D picture transfer</title>

    <link rel="stylesheet" href="public.css">

</head>

<body>

    <div id="wrap">

        <div id="stage">

            <img src="data:images/1.png" alt="">

            <img src="data:images/2.png" alt="">

            <img src="data:images/3.png" alt="">

            <img src="data:images/4.png" alt="">

        </div>

    </div>

    <script src="public.js"></script>

</body>

</html>

#wrap{

    width: 400px;

    height: 300px;

    position: absolute;

    left: 50%;

    top:300px;

    margin-left: -200px;

    perspective:800px;

    border:1px solid red;

}

#stage{

    width: 300px;

    height: 200px;

    position: absolute;

    left: 50%;

    top: 50%;

    margin-left: -150px;

    margin-top: -100px;

    transform-style:preserve-3d;

    transition:all 1s ease-in;

}

img{

    width: 300px;

    height: 200px;

    position: absolute;

}

img:nth-child(1){

    transform:rotateY(0deg) translateZ(150px);

}

img:nth-child(2){

    transform:rotateY(90deg) translateZ(150px);

}

img:nth-child(3){

    transform:rotateY(180deg) translateZ(150px);

}

img:nth-child(4){

    transform:rotateY(270deg) translateZ(150px);

}

window.onload=function(){

    var kk=0;

    var aa=document.getElementById("stage");

    var timer=setInterval(function(){

        kk+=90;

        aa.style.transform="rotateY("+kk+"deg)";

    },1000)

}

巴特西

简单的3D图片轮播dome

最新文章

热门文章