css3制作立体效果

使用 transform 属性实现立体旋转

通过 transform-style: preserve-3d 和 rotateX/Y/Z 实现 3D 空间变换：

.container {
  transform-style: preserve-3d;
  perspective: 1000px; /* 视距增强立体感 */
}
.box {
  transform: rotateX(45deg) rotateY(30deg);
}

添加阴影增强立体感

结合 box-shadow 模拟光源效果：

.box {
  box-shadow: 
    5px 5px 15px rgba(0, 0, 0, 0.3), /* 底部阴影 */
    -5px -5px 10px rgba(255, 255, 255, 0.1); /* 顶部高光 */
}

使用渐变模拟光照效果

通过 linear-gradient 创建明暗面：

.box {
  background: linear-gradient(
    135deg, 
    #ccc 0%, /* 亮部 */
    #999 50%, /* 过渡 */
    #666 100% /* 暗部 */
  );
}

边框模拟厚度

利用 border 或伪元素制作边缘厚度：

.box {
  position: relative;
}
.box::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  background: #555;
  transform: rotateX(-45deg);
}

动画强化 3D 动态效果

通过关键帧动画展示立体旋转：

@keyframes spin {
  0% { transform: rotateY(0); }
  100% { transform: rotateY(360deg); }
}
.box {
  animation: spin 5s infinite linear;
}

注意事项

• perspective 需设置在父容器上，数值越小透视感越强。
• 多个变换属性需合并到单个 transform 声明中，避免覆盖。
• 兼容性：部分旧浏览器需前缀（如 -webkit-transform）。