css3制作立体效果

使用 CSS3 制作立体效果的方法

box-shadow 属性
通过 box-shadow 可以模拟元素的立体阴影效果。调整阴影的模糊半径和偏移量可以增强立体感。

.box {
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

transform 属性
利用 transform 的 rotateX、rotateY 或 rotateZ 实现 3D 旋转效果。需配合 perspective 属性设置视距。

.container {
  perspective: 1000px;
}
.element {
  transform: rotateY(30deg);
}

transition 动画
为立体效果添加平滑过渡，增强交互体验。

.element {
  transition: transform 0.5s ease;
}
.element:hover {
  transform: rotateY(20deg) scale(1.05);
}

伪元素叠加
通过 ::before 或 ::after 创建伪元素，模拟立体边缘或高光。

.button::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(to bottom, #fff, transparent);
}

渐变与边框
结合 linear-gradient 和 border 模拟光照效果。

.card {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

注意事项

• 使用 transform-style: preserve-3d 确保子元素继承 3D 空间。
• 避免过度使用阴影或渐变，可能影响性能。
• 测试不同浏览器的兼容性，必要时添加前缀（如 -webkit-）。