免费在线CSS 3D变换生成器。可视化控制旋转（rotateX/Y/Z）、平移（translateX/Y/Z）、缩放（scale）和透视（perspective）。实时3D预览效果，一键复制CSS代码。适合前端开发者创建3D动画和立体效果，纯前端处理。
零依赖·可离线使用100px800px2000px
0%50%100%
0%50%100%
-180°0°180°
-180°0°180°
-180°0°180°
-200px0px200px
-200px0px200px
-200px0px200px
01.02.0
常见问题
CSS 3D变换需要什么前提条件？
使用CSS 3D变换需要在父元素上设置perspective（透视）属性来启用3D空间。transform-style: preserve-3d可以让子元素在3D空间中定位，backface-visibility控制背面可见性。所有现代浏览器都支持CSS 3D变换。
rotateX、rotateY和rotateZ有什么区别？
rotateX绕水平轴（X轴）旋转，产生上下翻转效果；rotateY绕垂直轴（Y轴）旋转，产生左右翻转效果；rotateZ绕Z轴（屏幕平面垂直方向）旋转，类似于2D旋转。组合使用可以创建复杂的3D立体效果。
perspective值大小对效果有什么影响？
perspective值定义了观察者到Z=0平面的距离。值越小（如200px），透视效果越强，变形越明显；值越大（如1000px），透视效果越柔和，变形越小。一般800-1200px是较自然的范围。
如何使用CSS 3D变换生成器
使用CSS 3D变换生成器只需三个简单步骤：
-
调整参数
拖动滑块调整透视距离、透视原点、旋转角度（rotateX/Y/Z）、平移距离（translateX/Y/Z）和缩放比例，每个参数都有即时数值反馈。 -
实时预览
预览区会实时应用所有3D变换效果，也可点击"随机效果"快速体验不同的组合。 -
复制代码
生成的CSS代码包含透视（parent）和transform（element）两部分，一键复制即可应用到您的项目，支持无限次调整。