css3实现3d正方体动画效果

最新推荐文章于 2024-01-31 14:52:59 发布

韬光养晦,厚积薄发

最新推荐文章于 2024-01-31 14:52:59 发布

阅读量1.2k

点赞数 5

文章标签： css3 动画 3d

本文链接：https://blog.csdn.net/li5466667/article/details/124504860

版权

1.实现原理

主要通过CSS3中transform属性实现，首先给元素设置成3D元素，然后定义六个面的样式再通过transform属性对其进行旋转即可实现旋转立方体效果
在这里插入图片描述

2.html文件

<!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>
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div class="box">
    <div><img src="./images/LOL01.jpg" alt=""></div>
    <div><img src="./images/LOL08.jpg" alt=""></div>
    <div><img src="./images/LOL07.jpg" alt=""></div>
    <div><img src="./images/LOL10.jpg" alt=""></div>
    <div><img src="./images/LOL05.jpg" alt=""></div>
    <div><img src="./images/LOL06.jpg" alt=""></div>
  </div>
</body>
</html>

3.css文件

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #000;
}

.box {
  position: fixed;
  width: 400px;
  height: 400px;
  /* background-color: red; */
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: 200px auto;
  transform-style: preserve-3d;
  transform: rotateX(0) rotateY(0);
  animation: run 5s linear infinite;
  /* perspective:1200px; */
}

.box div {
  width: 400px;
  height: 400px;
  border: 5px solid #fff;
  top: 0;
  left: 0;
  position: absolute;
  line-height: 400px;
  text-align: center;
}

.box div:nth-child(1) {
  transform: rotateY(90deg) translateZ(200px);
  animation: firsta 2s linear;
  /* background-color: aqua; */
}

.box div:nth-child(2) {
  transform: rotateY(180deg) translateZ(200px);
  animation: firstb 2s linear;
  /* background-color: red; */
}

.box div:nth-child(3) {
  transform: rotateY(270deg) translateZ(200px);
  animation: firstc 2s linear;
  /* background-color: orange; */
}

.box div:nth-child(4) {
  transform: rotateY(360deg) translateZ(200px);
  animation: firstd 2s linear;
  /* background-color: blue; */
}

.box div:nth-child(5) {
  transform: rotateX(90deg) translateZ(200px);
  animation: firste 2s linear;
  /* background-color: pink; */
}

.box div:nth-child(6) {
  transform: rotateX(-90deg) translateZ(200px);
  animation: firstf 2s linear;
  /* background-color: brown; */
}

@keyframes firsta {
  0% {
    transform: rotateY(90deg) translateZ(1400px);
  }

  100% {
    /* transform: rotateY(90deg) translateZ(200px); */
    /* background-color: aqua; */
  }
}

@keyframes firstb {
  0% {
    transform: rotateY(180deg) translateZ(1400px);
  }

  100% {
    /* transform: rotateY(180deg) translateZ(200px); */
    /* background-color: red; */
  }
}

@keyframes firstc {
  0% {
    transform: rotateY(270deg) translateZ(1400px);
  }

  100% {
    /* transform: rotateY(270deg) translateZ(200px); */
    /* background-color: orange; */
  }
}

@keyframes firstd {
  0% {
    transform: rotateY(360deg) translateZ(1400px);

  }

  100% {
    /* transform: rotateY(360deg) translateZ(200px); */
    /* background-color: blue; */
  }
}

@keyframes firste {
  0% {
    transform: rotateX(90deg) translateZ(1400px);
  }

  100% {
    transform: rotateX(90deg) translateZ(200px);
    /* background-color: pink; */
  }
}

@keyframes firstf {
  0% {
    transform: rotateX(-90deg) translateZ(1400px);
  }

  100% {
    transform: rotateX(-90deg) translateZ(200px);
    /* background-color: brown; */
  }
}



@keyframes run {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }

  25% {
    transform: rotateX(90deg) rotateY(90deg);
  }

  50% {
    transform: rotateX(180deg) rotateY(180deg);
  }

  75% {
    transform: rotateX(270deg) rotateY(270deg);
  }

  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

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

4.效果展示

3d正方体旋转

韬光养晦,厚积薄发

关注

5
点赞
踩
17

收藏

觉得还不错? 一键收藏
2
评论
css3实现3d正方体动画效果

1.实现原理主要通过CSS3中transform属性实现，首先给元素设置成3D元素，然后定义六个面的样式再通过transform属性对其进行旋转即可实现旋转立方体效果2.html文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met
复制链接

扫一扫