CSS 2D 變形產生器：順序與原點預覽

視覺編輯位移、旋轉、縮放與傾斜，比較反向順序、調整 transform-origin，並在本機複製原生 2D CSS。

02 / 原生預覽

相同數值，不同順序

顯示反向排列對照

目前順序 · 匯出此組

正在計算展示範圍…

rotate(15deg)

變形前的原點變形後對應點

虛線是原始盒子；位移也會移動原點標記。展示縮放不改變 CSS。

寬度 (px)

64–400px; 整數，不加單位。

高度 (px)

64–400px; 整數，不加單位。

長寬只定義此預覽參考盒，不會匯出；% 位移依元素自身的寬／高。

原點 X (%)

0–100%; 最多 1 位小數，不加單位。

原點 Y (%)

0–100%; 最多 1 位小數，不加單位。

03 / 順序與精度

清單是 CSS 從左到右的書寫順序。在固定父座標系中，點的變換可由右往左理解。

旋轉 (deg)

-360–360deg; 最多 1 位小數，不加單位。

欄位方向鍵微調，Shift 為十倍；空白、科學記號、附帶單位與超界輸入不會自動修正。此為工具限制，不是 CSS 上限。

04 / CSS

transform-box: border-box;
transform-origin: 50% 50%;
transform: rotate(15deg);

啟用的零值變形會保留；只有全部停用才輸出 none。identity transform 與 none 的 stacking context 行為不同。

設定只留在此頁，不上傳、不儲存、不寫入網址。不包含預覽長寬與底色；transform 不重新配置周圍內容，貼回元件後請檢查裁切、重疊與焦點。

選擇範例、選取並啟用變形步驟，再調整數值及上下順序。以原始盒子與原點標記比較反向順序；百分比位移請設定參考尺寸，再複製三行宣告。px 與 % 各自保留數值，不自動換算。

本工具處理四組具型別的 2D 變形，不處理 3D、透視、任意 CSS 匯入、動畫或版面設計。變形不會重新預留版面空間；請在實際元件檢查溢出、堆疊、固定定位子元素與可見鍵盤焦點。