CSS 3D 变换生成器
CSS 3D 变换生成器在 rotate3d、translate3d、scale3d 基础上加入 perspective 与 transform-style，模拟卡片翻转、立方体旋转等纵深效果，输出包含透视参数的 transform 声明，比二维版更适合做立体动效。
永久免费本地计算 · 零上传
🔒 全程在浏览器内计算，输入内容不会离开您的设备。
怎么用
- 设置透视距离 perspective
- 选择 3D 旋转与位移函数
- 开启 preserve-3d 保持立体
- 复制含透视的 transform
典型场景
卡片点击绕 Y 轴翻转展示背面
轮播元素带纵深透视排布
徽标做 3D 悬浮旋转吸引注意
常见问题
perspective 放哪？
可给父容器设 perspective，或写在 transform 函数里。
为什么立体感不明显？
透视距离过大接近平面，减小数值增强纵深效果。
和二维变换版区别？
本版专注带透视的三维变换，二维版处理平面位移缩放。