前端知识案例学习15-实现3d得旋转_前端3维环形旋转效果切图

作者：菜鸟追梦旅行 | 2024-02-23 08:04:11

踩

前端3维环形旋转效果切图

index.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <main>
      <div class="cube">
        <div class="img1"></div>
        <div class="img2"></div>
        <div class="img3"></div>
        <div class="img4"></div>
        <div class="img5"></div>
        <div class="img6"></div>
      </div>
    </main>
  </body>
</html>

css


html,
body {
  margin: 0;
}
 
* {
  box-sizing: border-box;
}
 
body {
  background-color: #2f3542;
}
 
main {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
 
.cube {
  width: 250px;
  height: 250px;
  transform-style: preserve-3d;
  transform-origin: 125px 125px 0;
  animation: rotate-cube 10s ease-in-out infinite;
}
 
.cube > div {
  width: 250px;
  height: 250px;
  background-size: cover;
  background-position: center center;
  opacity: 0.8;
  position: absolute;
  box-shadow: inset 0 0 4px 2px rgba(106, 106, 106, 0.4);
}
 
/* 前 */
.cube .img1 {
  background-image: url("https://images.pexels.com/photos/274131/pexels-photo-274131.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
  transform: rotateY(0deg) translateZ(125px);
}
 
/* 右 */
.cube .img2 {
  background-image: url("https://images.pexels.com/photos/1480690/pexels-photo-1480690.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
  transform: rotateY(90deg) translateZ(125px);
}
 
/* 左 */
.cube .img3 {
  background-image: url("https://images.pexels.com/photos/36487/above-adventure-aerial-air.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
  transform: rotateY(-90deg) translateZ(125px);
}
 
/* 下 */
.cube .img4 {
  background-image: url("https://images.pexels.com/photos/338713/pexels-photo-338713.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
  transform: rotateX(90deg) translateZ(125px);
}
 
/* 上 */
.cube .img5 {
  background-image: url("https://images.pexels.com/photos/325044/pexels-photo-325044.jpeg?cs=srgb&dl=close-up-of-fish-over-black-background-325044.jpg&fm=jpg");
  transform: rotateX(-90deg) translateZ(125px);
}
 
/* 后 */
.cube .img6 {
  background-image: url("https://images.pexels.com/photos/404280/pexels-photo-404280.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
  transform: rotateY(180deg) translateZ(125px);
}
 
@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);
  }
}

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】

前端知识案例学习15-实现3d得旋转_前端3维环形旋转效果 切图

前端知识案例学习15-实现3d得旋转_前端3维环形旋转效果切图