Loading...
Loading...
用滑块可视化构建 CSS transform:位移、旋转、缩放、倾斜与 3D 透视,带实时预览与复制
不用记语法就能构建 CSS transform。拖动位移、旋转、缩放和倾斜,看方块实时移动、旋转、拉伸。加上 rotateX、rotateY 和透视值即可进入 3D,设置变换原点,复制即用的 transform 与 transform-origin。
输出只包含你真正改动过的函数,保持整洁;一键即可重置为默认。全部在浏览器里运行,不依赖任何库。
拖动任意滑块,示例方块即时更新,含 3D 旋转。
位移、旋转、缩放、倾斜,外加 rotateX、rotateY 与透视做 3D。
选择原点,让旋转和缩放围绕你想要的位置进行。
只有你改过的值出现在 CSS 里,一键复制。
拖动位移、旋转、缩放或倾斜滑块。
加 rotateX、rotateY 和透视,做出 3D 效果。
需要不同支点时选择变换原点。
复制 transform CSS 粘进你的样式表。
调出细微的缩放或旋转,用于 hover 或 focus 状态。
用 rotateY 加透视让卡片倾斜,营造纵深感。
一边试一边看清每个函数如何改变元素。
每个滑块的值汇入一个 transform 字符串,只由非默认函数拼装,应用到预览元素,并与 transform-origin 一起作为可复制 CSS 展示。
生成器全程在浏览器运行,你的设置不上传。
transform 是 GPU 友好的 CSS,随拖动重算,预览流畅、无网络请求。