3D旋转图片、视频

2023-11-24 23:12:40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D视频</title>


  <style>
    
div{
    width: 300px;
    height: 300px;  
    margin: 200px auto;  
}
div div{
    position: absolute;
    opacity: 0.7;
}


.box{
    transform-style: preserve-3d;
    /*background-color: red;*/
    transform: rotateX(30deg) rotateY(30deg); 
   /* transition: all 3s;*/
   animation: move 5s linear infinite;
}
.box:hover{
    /*transform: rotateX(360deg);*/
}


.qian{
    background-color:plum;
    transform: translateZ(150px) 
}
.hou{
    background-color: purple;
      transform: translateZ(-150px) 
}
.shang{
    background-color: seagreen;
  transform: translateY(-150px)  rotateX(90deg);
}
.xia{
    background-color: slateblue;
    transform: translateY(150px)  rotateX(-90deg);
}
.zuo{
    background-color: tomato;
    transform: translateX(-150px)rotateY(90deg);

}
.you{
    background-color:burlywood;
    position: absolute;
    transform: translateX(150px)rotateY(-90deg);

}
img{
    width: 100%;
    height: 100%;
}

video{
    width: 100%;
    height: 100%;
}

@keyframes move {
    0%{
       transform: rotateX(0) rotateY(0); 
    }
     100%{
         transform: rotateX(360deg) rotateY(360DEG) ;
       
    }
}




.box:hover .qian{
    width: 500px;
    height: 500px;
    transform: translateZ(300px);
}
.box:hover .hou{
    width: 500px;
    height: 500px;
    transform: translateZ(-300px);
}
.box:hover .shang{
    width: 500px;
    height: 500px;
    transform: rotateY(-300px) rotateX(90deg);
}
.box:hover .xia{
    width: 500px;
    height: 500px;
    transform: rotateY(300px) rotateX(-90deg);
}
.box:hover .zuo{
    width: 500px;
    height: 500px;
    transform: rotateX(-300px) rotateY(90deg);
}
.box:hover .you{
    width: 500px;
    height: 500px;
    transform: rotateX(300px) rotateY(-90deg); 
}



    </style>
</head>
<body>
   <div class="box">
    
    
       <div class="qian">
        <img src="1.jpg" alt="" srcset="">
       </div>
       <div class="hou">
           <img src="2.jpg" alt="" >
       </div>
       <div class="shang">
           <img src="9.jpeg" alt="" >
       </div>
       <div class="xia">
           <img src="4.jpeg" alt="" >
       </div>
       <div class="zuo">
           <img src="5.jpg" alt="">
       </div>
       <div class="you">
           <img src="6.jpg" alt="">
       </div>
    </div>

</div>


<head>
    <style>
        body{
            background-image: url(520.jpg);
        
        background-repeat: no-repeat;
        background-position: left center;
        }
        
             </style>
             </head>
        


<body>



<embed src="2.mp3" autostart="true" loop="-1"controls="ControlPanel" width="0" height="0"> </embed>
         



        
    





</body>
</html>
效果:
码农公寓

相关文章
