CSS 變換產生器

CSS 變換產生器是 CSS 變換屬性的視覺化編輯器。您為每個變換函數移動滑桿 - 平移、旋轉、縮放、傾斜以及 3D 函數 rotateX、rotateY 和透視 - 並觀看效果即時應用於預覽元素,然後複製它產生的精確 CSS。它還允許您設定變換原點,即每次旋轉和縮放旋轉的錨點。

變換屬性重新定位和重塑元素,而不會幹擾其周圍的佈局。平移、旋轉或縮放的元素仍然佔據其原始框在流程中,因此相鄰元素不會移動,這使得變換成為懸停效果、入口動畫和任何不應觸發回流的運動的正確工具。可以在一個聲明中列出多個功能,並將它們從右向左應用於元素的座標空間,因此順序真正改變了結果:平移然後旋轉移動元素,然後將其旋轉到位,同時旋轉然後平移首先旋轉軸並以一定角度發送元素。

一切都發生在您的瀏覽器中。從「成長」、「旋轉」、「翻轉」或「3D 卡」等預設開始,微調每個功能,然後複製聲明。該工具僅寫入您實際更改的功能,因此您永遠不會發送冗餘比例 (1) 或旋轉 (0deg)。沒有帳戶,沒有上傳,一旦頁面加載,它就會保持離線工作。

兩個細節節省了真正的調試時間。首先,3D 旋轉僅在存在透視時才會看起來是三維的 - 要么是在同一變換中首先出現的透視 () 函數,如該工具發出它,要么是父級上的透視屬性 - 否則旋轉只是將元素壓平。其次,任何具有除無之外的變換的元素都會成為其固定且絕對定位的後代的包含區塊,並創建新的堆疊上下文,與過濾器屬性完全相同。位置:轉換後的父級內的固定子級錨定到該父級而不是視口,並且之前工作的 z 指數排序可能會發生變化。當變換以與外觀無關的方式破壞佈局時,包含區塊行為幾乎總是原因。