当前位置：首页 > CSS

css制作立体盒子

2026-03-12 09:11:03CSS

使用 CSS 制作立体盒子

方法一：利用 transform 和 box-shadow 实现立体效果

通过 CSS 的 transform 属性结合 box-shadow 可以快速创建立体盒子效果。以下是一个示例代码：

.box {
  width: 200px;
  height: 200px;
  background: #3498db;
  transform: perspective(500px) rotateX(20deg) rotateY(20deg);
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

perspective 属性为盒子添加透视效果，rotateX 和 rotateY 控制旋转角度，box-shadow 增强立体感。

方法二：通过多个面拼接实现 3D 盒子

通过 CSS 的 3D 变换属性，可以模拟一个完整的立方体。需要为每个面（前、后、左、右、上、下）单独设置样式：

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

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  opacity: 0.8;
}

.front { background: #e74c3c; transform: translateZ(100px); }
.back { background: #2ecc71; transform: translateZ(-100px); }
.left { background: #9b59b6; transform: rotateY(-90deg) translateZ(100px); }
.right { background: #f1c40f; transform: rotateY(90deg) translateZ(100px); }
.top { background: #1abc9c; transform: rotateX(90deg) translateZ(100px); }
.bottom { background: #34495e; transform: rotateX(-90deg) translateZ(100px); }

transform-style: preserve-3d 确保子元素在 3D 空间内渲染，每个面通过 translateZ 和旋转调整位置。

方法三：使用 clip-path 和渐变增强立体感

通过 clip-path 裁剪形状并配合渐变背景，可以模拟斜切的立体盒子：

.angled-box {
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}

clip-path 定义多边形裁剪区域，linear-gradient 为盒子添加颜色过渡，增强视觉深度。

注意事项

css制作立体盒子