css3制作立体效果

使用 transform 属性实现 3D 旋转

通过 transform 结合 rotateX、rotateY 或 rotateZ 实现立体旋转效果。示例代码：

.box {
  transform: rotateX(20deg) rotateY(30deg);
  transform-style: preserve-3d;
}

添加透视效果

使用 perspective 属性控制观察者与 z=0 平面的距离，值越小透视感越强：

.container {
  perspective: 500px;
}
.child {
  transform: translateZ(100px);
}

制作立方体结构

通过六个面组合成立方体，关键 CSS：

.cube {
  position: relative;
  transform-style: preserve-3d;
}
.face {
  position: absolute;
  width: 200px;
  height: 200px;
  opacity: 0.8;
}
.front { transform: translateZ(100px); }
.back { transform: rotateY(180deg) translateZ(100px); }

阴影增强立体感

配合 box-shadow 增加深度感知：

.card {
  box-shadow: 
    5px 5px 10px rgba(0,0,0,0.3),
    -1px -1px 2px rgba(255,255,255,0.2);
}

过渡动画效果

添加 transition 使变换更自然：

.element {
  transition: transform 0.5s ease-out;
}
.element:hover {
  transform: rotateY(180deg);
}

使用 CSS 变量控制参数

通过变量统一管理立体效果参数：

:root {
  --perspective: 800px;
  --rotate-angle: 15deg;
}
.object {
  perspective: var(--perspective);
  transform: rotateY(var(--rotate-angle));
}

多层堆叠实现景深

利用 z-index 和不同透明度创建层次感：

.layer1 { z-index: 1; opacity: 0.9; }
.layer2 { z-index: 2; opacity: 0.7; }
.layer3 { z-index: 3; opacity: 0.5; }