抖音盒子爆炸相册女盆友专属相册

最新推荐文章于 2021-06-07 11:25:12 发布

weixin_46692902

最新推荐文章于 2021-06-07 11:25:12 发布

阅读量524

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_46692902/article/details/105679026

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

爆炸盒子相册放成女友的照片

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   body{
      /* rgba(0,0,0,0)则表示完全不透明的白色,也即是无色；0.4表示透明度*/
         background: rgba(0,0,0,0.4);
         transition: 10s ease;
       }
   .box{
    /* 是相对定位*/
        position: relative;
     /* 盒子的宽高*/
        width: 400px;
        height: 400px;
        /* background: lawngreen; */
        /* border: 1px solid red; */
        margin: 200px auto;
        /* 转换为3d效果 x y z */
        transform-style: preserve-3d;
     /* rotateX(-60deg)沿着X轴负方向旋转60°（deg表示°）
        rotateY(60deg)沿着X轴正方向旋转60°
     */
        transform: rotateX(-60deg) rotateY(60deg);
      /* 移动的方式 10s 平缓过度 */
     transform: 10s ease;
      }
      .front,.top,.left,.right,.back,.bottom{
    /* 绝对定位； */
        position: absolute;
        width: 400px;
        height: 400px;
     /* 保证每个图片完整*/
     background-size: 100% 100%;
      }
   /* 下面表示每张图片的旋转和移动 */
   .front{
    background:url(../img/1.jpg);
    transform: translateZ(200px);
     background-size: 100% 100%;
   }
   .back{
    background:url(../img/2.jpg);
     background-size: 100% 100%;
    transform: translateZ(-200px);
   }
   .left{
         background:url(../img/3.jpg);
          background-size: 100% 100%;
         transform:  translateX(-200px) rotateY(-90deg);
       }
       .right{
         background:url(../img/4.jpg);
          background-size: 100% 100%;
         transform:  translateX(200px) rotateY(90deg);
       }
   .top{
    background:url(../img/5.jpg);
     background-size: 100% 100%;
    transform: translateY(-200px) rotateX(90deg);
   }
   .bottom{
    background:url(../img/6.jpg);
     background-size: 100% 100%;
    transform: translateY(200px) rotateX(-90deg);
   }
   /* 盒子会向X轴负方向旋转-360°Y轴旋转360° */
       body:hover .box {
         transform: rotateX(-360deg) rotateY(360deg); 
         transition: 10s ease;
       }
   /* -------------盒子会向外多移动200px------------ */ 
    body:hover .front{
      background:url(../img/1.jpg);
       background-size: 100% 100%;
     transform: translateZ(400px);
     }
    body:hover .back{
      background:url(../img/2.jpg);
       background-size: 100% 100%;
      transform: translateZ(-500px);
     }
     body:hover .left{
          background:url(../img/3.jpg);
          
           background-size: 100% 100%;
           transform:  translateX(-500px) rotateY(-90deg);
         }
     body:hover  .right{
          background:url(../img/4.jpg);
           background-size: 100% 100%;
           transform:  translateX(500px) rotateY(90deg);
         }
    body:hover .top{
      background:url(../img/5.jpg);
       background-size: 100% 100%;
      transform: translateY(-500px) rotateX(90deg);
     }
    body:hover .bottom{
      background:url(../img/6.jpg);
       background-size: 100% 100%;
      transform: translateY(500px) rotateX(-90deg);
     }
  
  </style>
 </head>
 <body>
  <div class="box">
   <!-- 前面 -->
   <div class="front"></div>
   <!-- 后面 -->
   <div class="back"></div>
   <!-- 左面 -->
   <div class="left"></div>
   <!-- 右面 -->
   <div class="right"></div>
   <!-- 上面 -->
   <div class="top"></div>
   <!-- 下面 -->
   <div class="bottom"></div>
  </div>
 </body>
</html>