掌握HTML+CSS创建灵动旋转的立方体，开启酷炫视界

2023-10-22 03:23:42

HTML+CSS 3D旋转立方体：网页设计中的动态视觉盛宴

在网页设计的世界里，HTML和CSS携手并进，为网页赋予了生命力和灵动之美。当它们碰撞在一起，诞生了各种令人叹为观止的效果，例如HTML+CSS 3D旋转立方体。

HTML构建框架，CSS注入活力

HTML负责构建立方体的基本结构，六个面的划分和相互关系至关重要。而CSS则为立方体注入了活力，使其旋转起来。巧妙地运用CSS的transform属性及其translate3d()、rotateX()、rotateY()和rotateZ()函数，赋予立方体三维旋转的效果。

<!-- HTML结构 -->
<div class="cube">
  <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>

<!-- CSS代码 -->
.cube {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.front, .back, .left, .right, .top, .bottom {
  width: 200px;
  height: 200px;
  position: absolute;
}

.front {
  transform: translateZ(100px);
}

.back {
  transform: translateZ(-100px) rotateY(180deg);
}

.left {
  transform: translateX(-100px) rotateY(-90deg);
}

.right {
  transform: translateX(100px) rotateY(90deg);
}

.top {
  transform: translateY(-100px) rotateX(-90deg);
}

.bottom {
  transform: translateY(100px) rotateX(90deg);
}

动画：点睛之笔

为了让立方体持续旋转，我们需要引入动画。CSS的animation属性粉墨登场，为立方体赋予了动态之美。

@keyframes rotation {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

.cube {
  animation: rotation 5s infinite linear;
}