前端Wiki/CSS3/进阶/2D 与 3D 变换

3D 变换与透视

3D 变换在 2D 基础上引入 Z 轴（指向屏幕外的「深度」）：rotateX 绕横轴翻转、rotateY 绕竖轴翻转、rotateZ 即普通 rotate、translateZ 沿深度移动。

但屏幕是平的，要出现「近大远小」的立体感必须先给透视：

perspective: 800px：写在父元素上，值是观察者到平面的距离，越小透视越夸张。
transform-style: preserve-3d：让子元素共享同一个 3D 空间（默认子元素会被拍扁成 2D），做立方体、翻转卡必备。
backface-visibility: hidden：元素背对观察者时隐藏——卡片翻转的正反面就靠它。

理解顺序很重要：perspective 建立相机，preserve-3d 建立空间，backface-visibility 处理遮挡。三者配合，纯 CSS 就能搭出立体场景。

本节要点rotateX/Y 引入 Z 轴，perspective 提供透视（写父元素）；preserve-3d 让子元素保持立体关系；backface-visibility:hidden 隐藏背面，是翻转效果的关键。

CSS

<style>
  .scene {
    perspective: 600px;      /* 父级给透视 */
    width: 100px; margin: 20px;
  }
  .cube {
    width: 100px; height: 100px;
    background: linear-gradient(#5ad4dd, #1d7f8a);
    display: flex; align-items: center;
    justify-content: center; color: #fff;
    transform-style: preserve-3d;
    animation: flip 3s ease-in-out infinite alternate;
  }
  @keyframes flip {
    from { transform: rotateY(0deg); }
    to   { transform: rotateY(60deg); }
  }
</style>
<div class="scene">
  <div class="cube">绕Y轴翻转</div>
</div>

🔗 相关词条transform 3D 变换 CSS 元素

📚 推荐阅读

移动前端开发经验指南万象云档

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

Element Plus v2.2 组件库教程万象云档

ECharts 图表教程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读