css3制作正方体

使用CSS3制作正方体

通过CSS3的3D变换功能可以创建正方体效果，主要涉及transform-style、perspective和rotate等属性。

HTML结构

创建一个包含6个面的容器，每个面代表正方体的一个面：

<div class="cube">
  <div class="face front">Front</div>
  <div class="face back">Back</div>
  <div class="face left">Left</div>
  <div class="face right">Right</div>
  <div class="face top">Top</div>
  <div class="face bottom">Bottom</div>
</div>

CSS样式

设置正方体容器和面的基本样式：

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(15deg) rotateY(15deg);
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  border: 2px solid black;
}

定位各个面

通过transform属性将每个面移动到正确位置：

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

.back {
  background: blue;
  transform: translateZ(-100px);
}

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

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

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

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

添加动画效果

让正方体旋转起来：

@keyframes spin {
  from { transform: rotateX(0) rotateY(0); }
  to { transform: rotateX(360deg) rotateY(360deg); }
}

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

调整透视

为父元素添加透视效果，增强3D感：

body {
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

浏览器兼容性

确保在支持的浏览器中查看效果，可能需要添加前缀：

-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(15deg) rotateY(15deg);

以上代码组合起来可以创建一个旋转的3D正方体，通过调整尺寸、颜色和动画参数可以自定义不同效果。