css制作立体盒子

使用 box-shadow 创建立体效果

通过 box-shadow 属性添加多层阴影可以模拟立体感。调整阴影的模糊度、偏移量和颜色深浅来营造光源效果。

.box {
  width: 200px;
  height: 200px;
  background: #3498db;
  box-shadow: 
    5px 5px 10px rgba(0,0,0,0.3),
    10px 10px 20px rgba(0,0,0,0.2),
    inset -3px -3px 5px rgba(0,0,0,0.1),
    inset 3px 3px 5px rgba(255,255,255,0.5);
}

结合 transform 实现 3D 旋转

使用 transform-style 和 perspective 属性建立 3D 空间，通过 rotateX/Y/Z 实现动态立体效果。

.container {
  perspective: 1000px;
}
.box {
  transform-style: preserve-3d;
  transform: rotateX(15deg) rotateY(15deg);
  transition: transform 0.5s;
}
.box:hover {
  transform: rotateX(30deg) rotateY(30deg);
}

多面体构造技术

通过伪元素创建立方体的六个面，分别定位到不同空间位置：

.cube {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(45deg) rotateY(45deg);
}
.cube::before, .cube::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,255,0.7);
}
.cube::before {
  transform: rotateY(90deg) translateZ(100px);
}
.cube::after {
  transform: rotateX(90deg) translateZ(100px);
}

边框渐变增强立体感

利用 border-image 或渐变背景创造有深度的边缘效果：

.box {
  border: 10px solid;
  border-image: linear-gradient(135deg, #777 0%, #fff 50%, #777 100%) 10;
  background-clip: padding-box;
}

光照效果模拟

通过 radial-gradient 创建顶部光源照射效果：

.box {
  background: 
    radial-gradient(circle at 30% 20%, white, transparent 30%),
    linear-gradient(135deg, #4a6bff, #2541b2);
}