css3制作立体效果

使用 transform 属性实现立体效果

通过 transform 的 rotateX、rotateY、rotateZ 或 rotate3d 实现元素在三维空间中的旋转。结合 perspective 属性设置观察者与平面的距离，增强立体感。

.box {
  width: 200px;
  height: 200px;
  background: #3498db;
  transform: rotateX(45deg) rotateY(20deg);
  perspective: 1000px;
}

利用 box-shadow 模拟立体阴影

通过多层阴影叠加，模拟光源照射下的立体投影效果。调整阴影的模糊度、偏移和颜色透明度。

.card {
  width: 150px;
  height: 200px;
  background: white;
  box-shadow: 
    5px 5px 10px rgba(0,0,0,0.2),
    10px 10px 20px rgba(0,0,0,0.1);
}

使用 border 创建斜面效果

通过透明边框与背景色结合，模拟元素的斜面或边缘高光。

.button {
  width: 120px;
  height: 40px;
  background: #2ecc71;
  border-top: 2px solid rgba(255,255,255,0.3);
  border-left: 2px solid rgba(255,255,255,0.3);
  border-bottom: 2px solid rgba(0,0,0,0.2);
  border-right: 2px solid rgba(0,0,0,0.2);
}

通过 gradient 模拟光照渐变

使用线性渐变或径向渐变表现立体表面的明暗变化。

.cylinder {
  width: 100px;
  height: 200px;
  background: linear-gradient(
    to right,
    #34495e 0%,
    #7f8c8d 50%,
    #34495e 100%
  );
  border-radius: 50px/100px;
}

结合 animation 制作动态立体效果

通过关键帧动画让立体效果动态化，例如旋转或浮动。

@keyframes spin {
  from { transform: rotateY(0); }
  to { transform: rotateY(360deg); }
}
.cube {
  animation: spin 5s infinite linear;
  transform-style: preserve-3d;
}