简单发布一个h5

最新推荐文章于 2024-08-16 15:34:57 发布

夸张的Y

最新推荐文章于 2024-08-16 15:34:57 发布

阅读量210

点赞数

本文链接：https://blog.csdn.net/sxdysq/article/details/125517136

版权

关键词由CSDN通过智能技术生成

玩乐一下

html文件:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <style></style>
</head>

<body>

<main>
  <div class="cube">
    <div class="img1"></div>
    <div class="img1"></div>
    <div class="img1"></div>
    <div class="img1"></div>
    <div class="img1"></div>
    <div class="img1"></div>
 
  </div>
</main>
</body>

</html>

css文件

html body{

}
*{
  box-sizing: border-box;
}
body{
  
  background-size: cover;
  background-image: url("img/1.bg.jpg");
  
}
main{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;

}
.cube{
  width: 250px;
  height: 250px;
  transform-style: preserve-3d ;
  animation: rotate-cube 10s ease-in-out infinite;
}
.cube > div{
  width: 350px;
  height: 350px;
  background-size: cover;
  background-position: center center;
  opacity: 0.8;
  position: absolute;
  box-shadow: inset 0 0 4px 2px 
   rgba(106, 106, 106, 0);
}
/* 前 */
.cube .img1{
  background-image: url("./img/1.0.jpg");
  transform: translateZ(225px);
}
/*右*/
.cube .img2{
  background-image: url("./img/1.0.jpg");
  transform: rotateY(90deg) translateZ(225px);
}
/* 左 */
.cube .img3{
  background-image: url("./img/1.0.jpg");
  transform: rotateY(-90deg) translateZ(225px); 
}
/* 下 */
.cube .img4{
  background-image: url("./img/1.0.jpg");
  transform: rotateX(90deg) translateZ(225px);
}
/* 上 */
.cube .img5{
  background-image: url("./img/1.0.jpg");
  transform: rotateX(-90deg) translateZ(225px);
}
/* 后 */
.cube .img6{
  background-image: url("./img/1.0.jpg");
  transform: rotateY(180deg) translateZ(225px);
}
@keyframes rotate-cube{
  0%{
    transform: rotateX(0deg) rotateY(0deg);
  }
  20%{
    /* 右边图片 */
    transform: rotateY(-90deg);
  }
  40%{
    /* 上 */
    transform: rotateX(-90deg);
  }
  60%{
    /* 左 */
    transform: rotateY(90deg);
  }
  80%{
    /* 下 */
    transform: rotateX(90deg);
  }
  100%{

    transform: rotateX(0deg) rotateY(0deg);
  }
}

感谢观看!