无需登录 数据私有 本地保存

CSS 3D 变换实验室 - 旋转、平移与透视探索

CSS 开发工具 3D CSS 变换 透视
34
0
0
0

CSS 3D 变换实验室

旋转 · 平移 · 透视 — 交互式探索 CSS 3D Transform

前
后
右
左
上
下
拖拽场景旋转立方体 · 滚轮调整透视距离
透视设置
800px
50%
50%
旋转 (Rotate)
-30°
30°
0°
平移 (Translate)
0px
0px
0px
缩放 (Scale)
1.00
预设 & 操作
实时 CSS 代码
常见问题

perspective 属性定义了观察者与 z=0 平面之间的距离，用于为3D空间中的元素赋予透视效果。值越小，透视效果越强烈（物体近大远小越明显）；值越大，效果越接近正交投影。通常设置在父容器上，作用于所有子元素的3D变换。常见值在 400px~1200px 之间。

perspective 决定透视的强度（观察距离），而 perspective-origin 决定透视的消失点位置（观察角度）。默认的 perspective-origin: 50% 50% 表示消失点在元素中心。改变它可以模拟从不同角度观察3D场景的效果。

默认情况下，子元素在父元素进行3D变换时会被扁平化到父元素的2D平面上。transform-style: preserve-3d 告诉浏览器保留子元素在3D空间中的位置关系。这是构建3D立方体、3D轮播等效果必不可少的属性。需要注意，它必须设置在直接父元素上，且不能与 overflow: hidden 等属性共存。

需要6个面，每个面绝对定位在同一个位置，然后分别使用 rotateX/Y 和 translateZ 将它们旋转并移动到正确位置：前面 translateZ(半边长)，后面 rotateY(180deg) translateZ(半边长)，右面 rotateY(90deg) translateZ(半边长)，左面 rotateY(-90deg) translateZ(半边长)，上面 rotateX(90deg) translateZ(半边长)，下面 rotateX(-90deg) translateZ(半边长)。父元素需设置 transform-style: preserve-3d。

  • 使用 will-change: transform 提前告知浏览器哪些元素会发生变化，让浏览器预先优化。
  • 尽量使用 transform 和 opacity 做动画，它们能触发GPU加速。
  • 避免在3D场景中使用 box-shadow 或复杂背景，它们会触发额外的重绘。
  • 合理控制 perspective 值，极端值可能导致渲染异常。
  • 移动端注意3D元素数量和面数，过多会显著影响帧率。

CSS 3D变换适合简单的3D效果（卡片翻转、3D轮播、简单立方体），易于实现且不需要JavaScript。WebGL（如Three.js）则适合复杂的3D场景（游戏、数据可视化、复杂模型），支持光照、材质、阴影等高级特性，但学习曲线更陡。对于大多数UI层面的3D需求，CSS 3D变换足够且性能优秀。
🔧 相关工具