第一次a rotateY 我確信會將一張卡片傾斜到螢幕上,然後將其壓扁,在我理解原因之前,我失去了一個下午的大部分時間。沒有透視。我已經寫好了旋轉,但沒有寫出使旋轉讀作深度的函數,而 CSS 正是我告訴它的內容,而不是我的意思。那天下午是我現在透過拖曳滑桿並觀看盒子回應來建立轉換的全部原因,而不是輸入值、保存、刷新和瞇眼。
Css transform 屬性是語言中最有用的東西之一,也是最容易犯微妙錯誤的東西之一。它移動、轉動、縮放和傾斜一個元素,而不會幹擾周圍的任何東西,這就是為什麼每個懸停效果、每個卡提升、每個入口動畫都依賴它。但它將許多行為打包成一個短字串,函數的順序會改變結果,並且 3D 函數具有一種依賴性,直到你擊中它之前,這種依賴性是看不見的。您可以看到正在建立的值的價值遠遠超過您必須想像的值。
的 CSS 變換產生器 為您提供每個功能的滑桿,包括平移、旋轉、縮放、傾斜以及 rotateX、rotateY 和透視的 3D 三重奏,並在您執行時將每個變更套用到即時預覽元素。它還允許您設定變換原點,即旋轉和縮放旋轉的錨點。確切的聲明位於下面的可複製框中,僅包含您觸及的功能。
TL;DR: Css
transform屬性在不影響頁面佈局的情況下重新定位和重塑元素,這使其成為懸停效果和動畫的正確工具。功能從右到左應用,因此順序很重要; 3D 旋轉需要一個perspective()看起來是三維的;任何轉換後的元素都會成為其固定和絕對子元素的包含區塊。此產生器透過即時預覽公開每個功能,僅發出您更改的功能,並產生乾淨的 CSS,您可以直接貼上到樣式表中。它完全在您的瀏覽器中運行,無需註冊。
CSS 變換產生器解決了什麼問題?
的 transform 屬性是抽象的,就像 CSS 網格是抽象的一樣。您沒有直接移動像素;您正在描述幾何運算並讓瀏覽器計算結果。 translateX(40px) rotate(15deg) scale(1.1) 這是一個精確的指令,但無法感受到僅從文本中連結這三個的結果。你必須渲染它。在自己的專案中渲染它意味著寫入-儲存-刷新循環,該循環足夠慢,以至於大多數人在找到他們想要的價值之前就停止了實驗。
產生器崩潰了,循環化為零。你拖曳旋轉滑桿,盒子即時轉動。你提高比例,它就會從中心開始生長。你添加一個翻譯,它就會滑動,同時保持轉動。十分鐘,數字和運動之間的關係不再是你在腦海中翻譯的東西,而是你感覺到的東西。當你完成後,就沒有什麼可轉錄的了,因為工作 CSS 一直在為你編寫。
還有第二個好處比看起來更重要。透過操縱建立變換意味著該工具只能發出有效、格式良好的 CSS。你不能產生損壞 transform 透過拖曳滑桿來獲得價值,因此輸出始終可以安全貼上。這種可靠性就是我關閉視覺 CSS 建構器架的原因,這也是我達到這個目的的原因 箱形陰影產生器 而不是用手計算陰影偏移。
為什麼變換函數的順序很重要?
這是最讓人心煩意亂的單一細節,值得理解而不是解決。當您將多個功能列在一個中時 transform,瀏覽器從右向左應用它們,每個都在前一個留下的座標空間中操作。這意味著元素最終位置的順序確實會改變。
採取 translateX(100px) rotate(45deg) 與 rotate(45deg) translateX(100px). 在第一個中,元素平移一百個像素,然後就地旋轉,因此它向右放置一百個像素並旋轉四十五度。在第二個中,首先發生旋轉,旋轉元素's 座標軸,然後平移將其沿移動一百個像素 旋轉 X 軸,將其沿對角線向下並發送到右側。相同的兩個函數,相同的兩個值,完全不同的位置。
生成器以有意的順序發出其功能,首先是透視,然後是平移,然後是旋轉,然後是縮放,然後是傾斜,這是一個合理的預設值,可以保持常見情況直觀地表現。但是一旦您了解順序是有意義的,您也會理解為什麼將轉換從一個地方複製到另一個地方有時會產生您意想不到的結果:您移動了字串,但沒有移動背後的心理模型。自己構建它,並查看每個函數'的貢獻,就是該模型如何建構的。
如何讓 3D 變換看起來像是 3D?
這是那天下午讓我付出的代價的陷阱。功能 rotateX 和 rotateY 圍繞水平軸和垂直軸轉動一個元素,這應該會像翻頁一樣將其朝向或遠離您。但預設情況下,場景中沒有深度,因此旋轉會直接投影到螢幕的平面上,並且元素看起來只是壓縮。 A rotateY(60deg) 沒有透視,看起來元素變得更窄,而不是轉動。
缺少的成分是 perspective,有兩種方法可以提供它。你可以放一個 perspective 父元素上的屬性,它為其所有 3D 子元素建立一個共享消失點,或者您可以新增 a perspective() 元素一開始的功能'自己的 transform,這賦予了一個元素自己的深度。此產生器使用第二種方法:設定透視滑桿並發出光 perspective() 首先在鏈中,確切地說是它需要的位置。較小的值,在三百到六百像素之間,將消失點放置在元素附近並使深度變得戲劇化;較大的值會將效果趨於平緩傾斜。
工具中預設的 3D 卡是查看此內容的最快方法。它設定了六百個像素的透視和一個 rotateY 二十五度,預覽盒令人信服地傾斜到螢幕上。將透視滑桿轉回零,然後觀看相同的旋轉塌陷成扁平南瓜。前後是整堂課的兩次拖曳。
變換起源有什麼作用?
每次旋轉和每個刻度都需要一個固定點來旋轉,該點是變換原點。預設情況下,它位於元素的死點,這就是為什麼它是未修改的 rotate 旋轉一個盒子繞其中間和一個未修改的盒子 scale 它同時向各個方向向外生長。移動原點,兩種行為都會改變。
將原點設為 top left 旋轉變成鞦韆,元件像鉸接標誌一樣從左上角旋轉。將其設定為 bottom 和a scaleY 元素從底部向上增長,而不是對稱地擴展,這正是您想要的從圖表軸上升的條形。生成器提供所有九個關鍵字位置、中心、四個邊和四個角,並在選擇一個位置時更新預覽,因此旋轉和擺動之間的差異只需單擊一下即可。
這是那些幾乎看不見的屬性之一,直到你需要它,然後它是唯一產生你想要的效果的東西。應該從頂部邊緣展開的選單,應該從其所屬元素中縮放的工具提示,應該圍繞角落而不是中間旋轉的卡片,所有這些都是變換起源的,並且從中都沒有明顯看出 transform 唯有價值。
為什麼變換不會推動其他元素?
最有用的屬性之一 transform 也是人們第一次咬他們時最驚訝的一個。轉換後的元素不會影響周圍的佈局。當您將一個盒子向右平移四十像素時,它會向右渲染四十像素,但它仍然在文件流中保留其原始空間,因此沒有其他移動來填補空白,並且沒有任何東西被推到一邊。變換是一種繪畫時間效果,在計算佈局後應用。
這是一個功能,而不是一個錯誤,這正是使轉換成為正確的動畫工具的原因。因為移動元素 transform 瀏覽器不會觸發回流,可以在 GPU 上合成更改並將動畫保持在每秒 60 幀。移動相同的元素 top 或者 left 或者 margin 強制瀏覽器重新計算每個幀上的佈局,這是動畫結巴和掉落幀的最常見原因。如果您想要平穩的運動,請製作動畫 transform 和 opacity,並且您不考慮佈局屬性。當您確實需要回流周圍的內容時,這是一個您想要更改佈局而不是轉換的標誌,以及類似的工具 flexbox 產生器 或者 CSS 網格產生器 是正確的起點。
為什麼一個固定的孩子會闖入我改造的元素?
這個陷阱看起來就像是無關事物的錯誤,值得在花費你一個小時之前知道。規範說任何元素都有 transform 價值除外 none 成為其後代的包含區塊 fixed 或者 absolute,它也創造了一個新的堆疊環境。這兩種後果都遠遠超出了變換本身。
包含塊的變化是讓人驚訝的變化。 A position: fixed 元素應該錨定到視口,保持頁面滾動的狀態。但如果該固定元素的任何祖先都有變換,則固定元素錨定到 那個祖先 相反,突然你的"固定&引用;標題滾動離開內容或您的模態被困在卡片內。關於變換和#39的任何內容;外觀暗示了這一點;該元素看起來不錯,並且向下三級的東西會錯誤地定位自己。當固定或絕對元素表現得好像被困住一樣時,首先要檢查的是祖先是否攜帶變換。堆疊上下文的變化會導致一類平行的混亂,其中 a z-index 過去的工作突然不起作用,因為轉換後的元素將其子元素密封到自己的堆疊層中。完全相同的行為也適用於 filter 財產,這就是為什麼 CSS 濾波器產生器 帶有相同的警告。
生成器涵蓋哪些功能?您何時達到每個功能?
該工具公開了全套公共變換函數,它有助於了解每個函數的用途,而不是隨機拖曳它們。這是地圖。
| 功能 | 它做什麼 | 典型用途 |
|---|---|---|
translateX / translateY |
沿著軸移動元件 | 滑入式入口、懸停推動、偏移定位 |
rotate |
圍繞其中心轉動元件 (2D) | 傾斜徽章、旋轉裝載機、有趣的懸停角度 |
scale (X 和 Y) |
元素增長或收縮 | 懸停變焦、彈出效果、按下回饋 |
skewX / skewY |
沿著軸線傾斜元件 | 動態橫幅、斜體形狀、運動提示 |
rotateX / rotateY |
在 3D 空間中轉動元素 | 卡片翻轉、傾斜面板、蓋流效果 |
perspective |
增加深度,以便 3D 旋轉正確讀取 | 始終與 rotateX 或 rotateY 配對 |
需要合作夥伴的兩個是 3D 旋轉,如果沒有視角,它不會產生令人信服的效果,還有負比例,值得指出,因為它並不明顯。設定 scaleX 負值會水平翻轉元素,就像鏡子一樣,這就是翻轉水平預設的工作原理。這是一個真正有用的技巧,鏡像一個圖標而不是導出第二個資產,一旦您知道允許負值,它就會直接脫離比例控制。
生成器如何保持預覽誠實?
任何視覺化建構器的失敗模式都在預覽顯示的內容和匯出的程式碼產生的內容之間漂移。一種以某種方式呈現預覽並以另一種方式編寫 CSS 的工具比根本沒有工具更糟糕,因為它教你一個不會重現的值。此生成器透過建立預覽#39 來避免這種情況;內聯樣式和從相同函數複製的聲明,因此您看到的實際上是您貼上的內容。沒有第二條程式碼路徑可能出現分歧。
這也是為什麼輸出僅包含您變更的功能。離開 scale 以其身份一,或 rotate 在零處,表示這些函數在字串中根本不存在,而不是寫為冗餘 scale(1) 噪音。乾淨的變換是你可以一目了然地閱讀並信任的變換,並且只發出有意義的函數與我在視覺 CSS 工具中依賴的學科相同 梯度發生器 到框陰影生成器。如果您正在組裝更廣泛的套件,則 web 開發人員工具包 收集我最常打開的,好好使用它們的習慣就在其中 開發人員生產力工具 指南。
哪些瀏覽器支援 CSS 轉換?
目前每個瀏覽器都支援 CSS 轉換,並且已經支援十多年了。 2D 函數(平移、旋轉、縮放和傾斜)是通用且無前綴的,3D 函數也是如此 perspective chrome、firefox、safari 和 Edge 也同樣受到良好支援。舊的 -webkit- 和 -moz- 曾經必要的前綴在今天的樣式表中是自重,並且該生成器的輸出是標準的、無前綴的 CSS,您可以按書面形式發送。對於權威規則,W3C 的 CSS 轉換模組 1 級和 2 級規範是主要來源,一旦生成器讓您直觀地遵循它們,它們就值得一讀。
如果您同時建立一個更廣泛的視覺化工具包,那麼 邊界半徑產生器 轉換建構器是天然的伴侶,因為懸停上的轉換幾乎總是希望轉換使其平滑。這裡的所有內容都在客戶端運行,您複製的 CSS 就是您的使用,沒有運行時、沒有構建步驟和依賴性。
常見問題
什麼是 CSS 變換產生器?
CSS 變換產生器是一種視覺化工具,可根據您選擇的設定建立 CSS 變換值。您可以使用滑桿調整平移、旋轉、縮放、傾斜和 3D 視角,並輸出變換聲明以及結果的即時預覽。
變換函數的順序重要嗎?
是的。函數在元素座標系中從右向左應用,因此平移然後旋轉與旋轉然後平移不同。平移首先移動元素,然後將其旋轉到位;旋轉首先轉動軸,因此稍後的平移會以一定角度將其發出。
如何讓 CSS 轉換看起來像是 3D?
3D 旋轉需要透視才能讀作深度。在變換開始時新增透視 () 函數,當您設定透視滑桿時,此產生器會發出該函數,或在父元素上放置透視屬性。大約 300 到 600 像素的值使深度最顯著。
變換起源有什麼作用?
transform-origin 設定變換樞軸和縮放的點。預設是元素的中心。將其移動到一個角落,旋轉就變成從該角落擺動;將其移動到邊緣,並且縮放從該邊緣開始增長,而不是在每個方向上向外增長。
為什麼轉換不會移動頁面上的其他元素?
變換是一種繪畫時間效果。該元素在新位置渲染,但在佈局中仍然保留其原始框,因此周圍沒有任何變化。這就是 Transform 成為動畫理想選擇的原因,也是當您需要內容回流時使用邊距、位置或佈局屬性的原因。
為什麼固定或絕對的子級會在轉換後的元素內破裂?
任何具有變換的元素(除了沒有變換之外)都會成為其固定且絕對定位的後代的包含區塊,並創建新的堆疊上下文。位置:固定子節點然後錨定到轉換後的父節點而不是視口,並且 z 指數排序可以更改。如果必須將子節點固定在螢幕上,則將其移至轉換後的元素之外。
我應該用動畫變換而不是頂部、左側、寬度或高度嗎?
是的,為了平穩運動。變換和不透明度在 GPU 上合成,不會觸發佈局,因此它們以 60fps 的速度進行動畫處理。頂部、左側、寬度或高度的動畫化迫使瀏覽器重新計算每個畫面上的佈局,這是動畫不穩定的常見原因。
產生的變換 CSS 是否免費且安全使用?
是的。該工具完全免費,沒有註冊或使用限制,並且每個現代瀏覽器都支援標準的、無前綴的 CSS。所有處理都發生在您的瀏覽器中,因此不會上傳任何內容,並且工具在載入後會離線工作。
