庞永胜

简单的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="images/1.png" alt="">
            <img src="images/2.png" alt="">
            <img src="images/3.png" alt="">
            <img src="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)
}

 

posted @ 2016-08-29 14:53  庞永胜  阅读(239)  评论(0)    收藏  举报