CSS变换生成工具
免费的在线CSS变换生成工具，无需安装。具有可视化编辑功能的变换属性编辑器。
關於 CSS Transform
透過滑桿以互動方式建構 transform 宣告，支援 translate（X/Y/Z）、scale（X/Y）、rotate（Z/X/Y）與 skew（X/Y），並可編輯 transform-origin 以及調整預覽框尺寸。產生的 CSS 使用 translate3d 表示位移，僅在 scale/rotate/rotateX/rotateY/skew 變更時才會合併輸出，並與 transform-origin 一併產生。
如何使用
1. 拖動 Translate、Scale、Rotate 與 Skew 下的滑桿來組合 transform；每個數值旁還有數字輸入框可供精確輸入。 2. 調整預覽 Box Size（50–250px），並編輯 Transform-Origin（任意 CSS origin 字串，預設為 50% 50%）。 3. 點擊 Reset 將所有數值還原為中性預設值。 4. 點擊 Copy 即可同時複製 transform: ... 與 transform-origin: ... 宣告。
Transform 函式與取值範圍
translateX/Y/Z：-200 到 200 px，任一非零時合併為 translate3d(x, y, z) 輸出。scaleX/Y：0.1 到 3，任一不等於 1 時輸出 scale(x, y)。rotate (Z)：-360 到 360deg。rotateX/Y：-180 到 180deg。skewX/Y：-60 到 60deg，任一非零時輸出 skew(x, y)。若未修改任何函式，輸出為 transform: none。
▶為什麼我的旋轉只在 3D 下生效，元素看起來卻是平的？
rotateX 與 rotateY 分別繞水平與垂直軸旋轉，需要在父元素上設定 perspective（或 transform-style: preserve-3d）才能呈現真正的 3D 效果。預覽區未套用 perspective，因此結果可能看起來是被壓扁而非完全旋轉。
▶輸出中是否包含 transform-origin？
包含。複製的文字會在不同行同時包含 transform: ... 與 transform-origin: ...，使用你輸入的 origin 字串（預設為 50% 50%）。
▶可以輸入精確數值而不拖動滑桿嗎？
可以。每個 transform 數值在滑桿旁都配有數字輸入框，支援直接輸入。transform-origin 欄位可接受任意合法的 CSS origin 字串。
▶為什麼我只移動了一個軸，輸出卻是 translate3d？
對於任何非零位移，工具始終輸出 translate3d(x, y, z) 以確保結果對 GPU 友善；其餘軸預設為 0。
如果这个工具对你有帮助，请考虑请我喝杯咖啡。
請幫我買杯咖啡吧。