CSS 3D 变换

调节 3D 旋转(rotateX / rotateY / rotateZ)、Z 轴位移(translateZ)与透视距离(perspective),实时预览变换效果并一键复制生成的 transform CSS 代码,全部在浏览器本地完成。

实时预览 已就绪
3D
rotateX 0deg
rotateY 0deg
rotateZ 0deg
translateZ 0px
变换参数
预设视角

perspective 越小,Z 轴位移的视觉纵深越明显;旋转角度取值范围为 −180°~180°。

生成的 CSS
调节参数后点击「生成代码」,transform CSS 将显示在这里。

生成的 transform 代码可直接复制到样式表中使用。

使用规则
  • 3D 变换需配合透视:父元素用 perspective 或函数式 perspective()。
  • 函数书写顺序影响结果,通用顺序为 perspective → rotate → translate。
  • 旋转角度可正可负,正值一般为顺时针或朝观察者方向。
  • translateZ 的正值表示朝观察者移动,负值表示远离。
  • 本工具完全在浏览器本地运行,输入数据不会上传到任何服务器。
  • 预览效果受容器尺寸与透视距离影响,仅供参考。