色彩格式轉換
轉換 HEX、RGB、HSL 與透明度，即時檢視色樣並複製可用於 CSS 的色值。
CSS 2D 與 3D 變形產生器
調整平移、旋轉、縮放、傾斜與變形原點，按需加入透視及三維參數並匯出 CSS。
三維選項
預覽
虛線標示原始位置。變換順序會影響效果，匯出 CSS 與目前預覽一致。
CSS
工具介紹
擺放或傾斜介面元素時，可對照原始輪廓，確認所需參數。
使用說明
先設定 X/Y 平移、旋轉、兩軸縮放、傾斜與變形原點，對照原位置輪廓觀察效果。展開並啟用 3D 後，可調整透視距離、Z 平移及 X/Y 旋轉。可複製或下載 transform 與 transform-origin 兩項宣告。
預覽與匯出使用同一組參數及固定順序，重新排列變形函式可能改變結果。負縮放可翻轉元素，零縮放會使該方向無法看見。工具產生的是元素樣式，不是三維模型或完整動畫。
常見問題
可以交換變形函式的順序嗎？
介面沒有函式重排控制項；若要調整，請自行編輯匯出的 CSS 並重新確認效果。預覽與匯出使用相同固定順序，順序會影響結果；負縮放會翻轉對應軸，零縮放則會將其壓扁。
移動或縮放元素後，原位置為什麼還留著空間？
CSS transform 改變繪製效果，不會改變元素原本的版面配置盒，因此相鄰內容仍依原位置排列。間距請用一般版面配置規則處理，視覺變換的支點則可用 transform-origin 調整。
相關工具
在新分頁開啟
評論
0