CSS 工作流程
CSS 2D 變形：順序、原點與參考盒子
相同的變形數值，只要順序不同就可能形成不同幾何結果。先以原生預覽對照原始 border box，再到實際元件檢查。
內容更新： · 維護者與修正回報
書寫順序會改變座標系統
CSS 依書寫順序由左至右組合變形矩陣；每個函式會為下一個函式建立座標。若改用固定的父層座標描述同一結果，則相當於由右至左套用幾何操作。這是矩陣組合，不是動畫時間順序。
原點為 0% 0% 時，translate(100px, 0px) rotate(90deg) 會把原始左上點映射至 (100, 0)；rotate(90deg) translate(100px, 0px) 則映射至 (0, 100)。工具保留指定的書寫順序，並可用共同展示倍率比較完全反向的順序。未啟用任何步驟才輸出 none；已啟用的單位變形函式仍保留，因為非 none 的 transform 即使外觀不變，也可能建立堆疊環境與包含區塊。
原點與位移百分比依參考盒子計算
transform-origin 選擇支點：CSS 先移至原點、組合變形，再移回。工具明確輸出 transform-box: border-box;。水平原點與位移百分比使用 border box 寬度，垂直百分比使用高度。200 × 100px 的參考盒子中，translate(50%, 25%) 代表 (100px, 25px)；50% 50% 原點則代表 (100px, 50px)。
空心標記代表原始原點，實心標記代表該點經完整變形後的位置；位移可能讓兩個標記分離。改變參考尺寸會影響百分比位移，不會改變 px 位移。px 與 % 各自保留記憶體數值，切換單位不是等效換算。本指南與預覽針對 HTML border box，不涵蓋 SVG 參考盒子。
鏡射與退化幾何仍可能是合法 CSS
負縮放會沿該軸鏡射。零縮放會形成不可逆矩陣，變形物件不顯示；兩軸傾斜的組合也可能產生不可逆或接近不可逆的矩陣。工具接受支援的數值，並在縮放為零或原生矩陣行列式接近零時警告，不會把這些合法宣告誤判成輸入錯誤。
預覽由原生 CSS 渲染，DOMMatrix 計算邊界與原點。為放入原始及變形後的各角，展示可能縮小；兩種順序使用相同倍率。預覽尺寸、色彩、展示縮放與反向對照都不包含在複製的三行宣告中。合法但極薄的形狀仍可能難以辨識。
另外檢查版面、溢出與可見焦點
變形改變繪製幾何，不會讓周圍版面重新排版；原始版面空間仍存在，內容可能蓋住鄰近元素或擴大可捲動溢出範圍。祖先的 overflow 或 containment 也可能裁切內容。非 none 的變形會影響堆疊與包含區塊，包括定位子元素；本工具不是完整的版面模擬器。
預覽清楚不代表無障礙合格。請用實際文字、控制項、固定定位子元素、點擊範圍與鍵盤焦點，檢查真正尺寸及縮放。不要為了模仿裝飾預覽，就全域移除必要溢出規則或隱藏焦點。工具提供有標籤的數值欄位、原生滑桿、順序按鈕與可選取的 CSS，不要求拖曳或動畫操作。
明確說明範圍、錯誤與隱私
四組不重複的步驟接受位移 ±500px 或 ±200%、旋轉 ±360deg、傾斜 ±60deg、原點 0–100%，最多一位小數。縮放接受 −3 至 3，最多兩位小數；參考尺寸接受 64–400px 整數。拒絕空值、非有限數值、科學記號、附帶單位、超出範圍及過多小數。這是工具範圍，不是 CSS 限制。停用步驟的數值會保留但不套用；無效啟用欄位會阻止預覽、輸出與複製，不顯示過期的成功結果。
方向鍵可微調，Shift 將微調量乘以十；兩種單位各自保留數值。重設會停用全部步驟並恢復中性值。剪貼簿失敗時仍可選取程式碼。設定只存在本頁記憶體，不上傳、不持久儲存、不寫入網址，也不記錄輸入值分析；既有核准頁面分析仍可能運作。幾何預覽需要現代瀏覽器的 DOMMatrix，缺少時會明示限制。工具不匯入任意 CSS 或 HTML、不處理 SVG、不提供 3D 或透視，也不輸出動畫或 Tailwind 類別。
/* 在相同參考尺寸下比較順序。 */
.a, .b { width: 200px; height: 100px; transform-box: border-box; transform-origin: 0% 0%; }
.a { transform: translate(100px, 0px) rotate(90deg); }
.b { transform: rotate(90deg) translate(100px, 0px); }資料可信度