3D旋转图片、视频

2021-05-16 11:05:14 阅读：179 来源： 互联网

标签：视频 500px transform 旋转 rotateX rotateY background height 3D

<!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>

效果:

标签：视频,500px,transform,旋转,rotateX,rotateY,background,height,3D
来源： https://www.cnblogs.com/bin521/p/14773346.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

3D旋转图片、视频