做前端這幾年CSS里的角度單位我前后踩過不少坑。平時寫個rotate(45deg)、linear-gradient(135deg)沒太大感覺可一旦要做多圈旋轉(zhuǎn)動畫、圓錐漸變、數(shù)據(jù)驅(qū)動的旋轉(zhuǎn)效果deg、grad、rad、turn這四個單位之間的換算關(guān)系一下子就繞人了。好在這東西本身并不復(fù)雜只是很少有人系統(tǒng)整理過。這篇文章我就把 CSS 角度單位一次講透每個單位是什么、該怎么換算、實際項目里選哪個更合適并附上我在真實場景里反復(fù)驗證過的代碼和避坑經(jīng)驗。前端新手可以把它當(dāng)掃盲文寫過一段時間 CSS 的同學(xué)也能在這里找到一些工程化寫法少走點彎路。1. 四個角度單位逐一拆解1.1 deg前端使用率最高的角度單位deg全稱 degree也就是我們從小最熟悉的“度”。一個圓周被均分成 360 份每一份就是 1deg。所以 90deg 是直角180deg 是半圈360deg 是一整圈。它是我日常最常用的角度單位沒有之一。原因很直接設(shè)計工具里默認就是“度”設(shè)計師標注“旋轉(zhuǎn) 45 度”“傾斜 30 度”拿到手直接寫成rotate(45deg)就行另外瀏覽器兼容性也最好從老 IE 時代到現(xiàn)代瀏覽器deg只要出現(xiàn)在合法的 CSS 屬性里基本不會出問題。有個小細節(jié)容易被忽略CSS 里數(shù)值為 0 時可以省略單位rotate(0)和rotate(0deg)是一樣的。不過我在代碼里一般還是會把單位寫上因為團隊協(xié)作時統(tǒng)一帶單位能減少閱讀成本尤其在calc()里參與運算時單位寫清楚能避免很多莫名其妙的報錯。1.2 turn圈數(shù)黨的直觀利器turn翻譯過來就是“圈”。1turn 就是完整的一圈0.5turn 是半圈0.25turn 是四分之一圈。聽起來和“度”沒什么本質(zhì)區(qū)別但它解決了一個問題當(dāng)你需要表達“轉(zhuǎn)幾圈”的時候用turn比用deg直觀太多。舉個例子做一個無限旋轉(zhuǎn)的 loading 圖標動畫終點我一般寫rotate(1turn)意思是轉(zhuǎn)一整圈。如果寫rotate(360deg)也能實現(xiàn)但每次都要心算一下 360 是多少如果需求是從 0 轉(zhuǎn)到 3 圈rotate(3turn)一眼就懂rotate(1080deg)還得在腦子里過一遍。生活化類比就是擰瓶蓋。“再擰半圈就開”這種表達你不會說“再擰 180 度”雖然兩者完全等價但聽感上turn更貼合直覺。1.3 grad被冷落的百分度grad也叫“百分度”或“梯度”把直角定為 100grad所以一個圓周是 400grad。也就是說 90deg 等于 100grad45deg 等于 50grad。這個單位在 CSS 里是合法的角度單位但實際業(yè)務(wù)中真的很少有人用。它主要出現(xiàn)在一些測量領(lǐng)域比如工程測繪、導(dǎo)航坐標轉(zhuǎn)換里因為百分制的換算在某些儀器讀數(shù)上更省事。在 Web 前端里你大概率不會在正規(guī)的設(shè)計稿或需求文檔里看到“某元素旋轉(zhuǎn) 150grad”這種描述。為什么還要認識它因為你會“看得到它”。偶爾打開一些第三方生成的 CSS 代碼或者翻到某些老教程里面可能出現(xiàn)grad。這時候你要能反應(yīng)過來100grad 不是“100 度”而是直角。如果當(dāng)成deg去理解整個布局都會偏而且偏得很奇怪。1.4 rad數(shù)學(xué)與前端銜接的橋梁rad是弧度數(shù)學(xué)課上的老朋友。它的定義是圓弧長度等于半徑時這段弧所對應(yīng)的圓心角大小就是 1rad。一個整圓的弧長是2πr所以一圈就是2πrad大約等于 6.2832rad。在 CSS 里你可以直接寫transform: rotate(0.5rad)這種寫法在瀏覽器里也完全合法但實際業(yè)務(wù)里很少直接這樣寫。因為對大多數(shù)開發(fā)者和設(shè)計師來說弧度不如“度”直觀。不過rad在 JS 側(cè)卻是絕對的“主角”。Math.sin()、Math.cos()、Math.atan2()這些數(shù)學(xué)函數(shù)的返回值都是弧度。也就是說只要你的旋轉(zhuǎn)角度是 JS 算出來的那它十有八九是rad單位。這時候你就需要做一次弧度到角度的換算再把結(jié)果交給 CSS。這個場景我會在后面的數(shù)據(jù)驅(qū)動部分專門展開。1.5 換算速查表與選型建議先把四個單位的核心換算關(guān)系列出來方便后面查單位一整圈直角半圈換算特點deg360deg90deg180deg最直觀grad400grad100grad200grad百分制rad6.2832rad1.5708rad3.1416rad與 JS 數(shù)學(xué)函數(shù)銜接turn1turn0.25turn0.5turn圈數(shù)語義清晰常用角度的對照表角度deggradradturn30°3033.3330.5241/1245°45500.7851/860°6066.6671.0471/690°901001.5711/4180°1802003.1421/2360°3604006.2831我的選型建議很簡單日常習(xí)慣寫成deg它是溝通成本最低的單位多圈動畫、帶有“圈數(shù)”語義的場景寫成turn跟 JS 數(shù)學(xué)打交道時先用rad計算最后交付給 CSS 時通常轉(zhuǎn)成deggrad知道它存在就行業(yè)務(wù)里基本別碰。如果面試或者跟同事討論時能把這套邏輯講清楚說明你對 CSS 單位不是只會抄代碼而是真懂原理。2. 真正用得到角度的前端場景2.1 旋轉(zhuǎn)動畫從 loading 到雷達掃描角度單位最直觀的應(yīng)用就是transform: rotate()。一個常見的 loading 動畫代碼是這樣的.spinner { width: 40px; height: 40px; border: 4px solid #eee; border-top-color: #3498db; border-radius: 50%; animation: spin 1s linear infinite; } keyframes spin { to { transform: rotate(1turn); } }這里我特意用1turn而不是360deg。原因前面說了語義清楚。你一眼就能看明白這個動畫讓元素轉(zhuǎn)一整圈而且方向是順時針。如果你要做“轉(zhuǎn)三圈后停住”的效果終點寫成rotate(3turn)就完事keyframes spinThree { from { transform: rotate(0turn); } to { transform: rotate(3turn); } }很多人會問3turn和1080deg不是等價嗎確實等價但從可讀性來說3turn更接近自然語言“轉(zhuǎn)三圈”。在多人維護的項目里這種細微的表達差別能省不少溝通成本。再進階一點角度單位不只用在元素旋轉(zhuǎn)上還常用來做“雷達掃描”這類帶方向動效的效果。我前陣子就在一個數(shù)據(jù)大屏項目里寫過一個雷達掃描.radar { position: relative; width: 160px; height: 160px; border-radius: 50%; overflow: hidden; background: repeating-radial-gradient( circle at center, transparent 0 18px, rgba(0, 255, 0, 0.1) 18px 20px ); } .radar::before { content: ; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient( from 0deg, rgba(0, 255, 0, 0.6), transparent 60deg 360deg ); animation: radarSpin 3s linear infinite; } keyframes radarSpin { to { transform: rotate(1turn); } }這個效果里有幾個值得拆解的地方。repeating-radial-gradient負責(zé)畫一圈一圈的波紋模擬雷達的環(huán)狀刻度。conic-gradient是一個圓錐漸變from 0deg表示從 12 點方向開始先是不透明的綠色到60deg處變成透明后面60deg 360deg的區(qū)域就全是透明。配合旋轉(zhuǎn)動畫整體就像一根雷達光束在順時針掃射。這里如果你換掉角度單位效果會有微妙差別。比如把from 0deg改成from 90deg起始的掃描線就從“正上方”變成了“正右方”。這種方向控制力是角度單位在視覺層最直接的體現(xiàn)。順便提一句常見的熱搜詞“css 漣漪光圈擴散”。如果只是做一個水波擴散的漣漪其實用不到角度transform: scale()加opacity就夠了。但如果你想做的是“雷達式掃描 波紋擴散”的復(fù)合效果掃描線就必須依賴角度單位。這兩種動效要分開理解別混為一談。2.2 漸變方向linear-gradient 與 conic-gradient角度單位在漸變里的應(yīng)用是日常開發(fā)里頻率最高的場景之一。但很多新手在這里第一次栽跟頭因為它和你直覺里的“角度方向”不完全一樣。linear-gradient()的角度定義是漸變線方向與正上方之間的夾角順時針計算。也就是0deg的漸變方向是從下往上等效于to top90deg的漸變方向是從左往右等效于to right180deg的漸變方向是從上往下等效于to bottom270deg的漸變方向是從右往左等效于to left等效關(guān)鍵字角度實際漸變起始to top0deg從下到上to right90deg從左到右to bottom180deg從上到下to left270deg從右到左to top right45deg從左下到右上to bottom right135deg從左上到右下舉個例子常見的 45 度斜紋背景.striped-bg { background: linear-gradient( 45deg, #f00 0 30px, #00f 30px 60px ); }這里的顏色是從左下角往右上角過渡的。很多人的第一反應(yīng)是“45 度不應(yīng)該是左上往右下嗎”實際上 CSS 的 45deg 等效于to top right方向是左下到右上。這個方向搞反背景的傾斜感會完全不同。再來看conic-gradient()。它的語法是background: conic-gradient(from 0deg, #f00 0 90deg, #00f 90deg 360deg);from 0deg表示漸變的起始角度默認在元素的 12 點方向然后順時針鋪開。上面這行代碼的效果是從 12 點方向開始0 到 90deg 是紅色90 到 360deg 是藍色。這就很適合做圓環(huán)、儀表盤、餅圖這類效果。比如一個簡單的進度環(huán)配合 CSS 變量和calc()就能實現(xiàn).progress { --p: 45; /* 進度百分比 0~100 */ width: 120px; height: 120px; border-radius: 50%; background: conic-gradient( from 0deg, #ff6b6b calc(var(--p) * 3.6deg), #eee calc(var(--p) * 3.6deg) ); position: relative; } .progress::after { content: ; position: absolute; inset: 10px; background: #fff; border-radius: 50%; }這里的calc(var(--p) * 3.6deg)是把百分比換算成角度。因為 100% 對應(yīng) 360deg所以 1% 就是 3.6deg。當(dāng)--p是 45 時彩色區(qū)域就是 162deg視覺效果正好是 45% 的圓環(huán)。這個寫法在實際業(yè)務(wù)里非常實用。你只要在 JS 里改一個 CSS 變量比如el.style.setProperty(--p, 80)進度環(huán)就會平滑變化。這就是角度單位配合數(shù)據(jù)驅(qū)動的經(jīng)典組合。2.3 字體漸變、裁剪與遮罩中的角度“CSS 字體漸變”也是搜索熱詞里經(jīng)常出現(xiàn)的一個需求。很多人以為字體漸變很難其實就是漸變背景加上文字透明裁剪.text-gradient { font-size: 32px; font-weight: bold; background: linear-gradient(90deg, #f00, #00f); -webkit-background-clip: text; background-clip: text; color: transparent; }關(guān)鍵點有三步給文字設(shè)置一個漸變背景把background-clip設(shè)成text讓背景只顯示在文字輪廓內(nèi)把color設(shè)成transparent讓文字本身的顏色不影響背景顯示。角度在這里決定了顏色分布的方向。上面代碼用90deg顏色就是從左到右漸變換成135deg就是斜向漸變整體文字會更有立體感。這種background-clip: text的技巧本質(zhì)還是漸變角度在發(fā)揮視覺作用。遇到電商活動頁、產(chǎn)品大促標題時很常用值得記下來。角度單位還可以結(jié)合mask做形狀裁剪。比如想做一個 120 度的扇形用conic-gradient加mask就能實現(xiàn).sector { width: 200px; height: 200px; background: #ff6b6b; border-radius: 50%; -webkit-mask: conic-gradient( from 0deg, #000 0 120deg, transparent 120deg 360deg ); mask: conic-gradient( from 0deg, #000 0 120deg, transparent 120deg 360deg ); }mask中黑色代表保留區(qū)域透明代表隱藏區(qū)域。from 0deg到120deg割出來的就是一塊從 12 點方向順時針展開的扇形。這種寫法在做空間可視化、數(shù)據(jù)分布圖的時候可以替代復(fù)雜的 SVG純 CSS 就能完成。2.4 色相旋轉(zhuǎn)濾鏡 hue-rotatefilter: hue-rotate()也是一個用到角度單位的屬性。它能整體改變圖片的色相0deg表示無變化360deg轉(zhuǎn)一圈后顏色還原成原始狀態(tài)。.filtered-image { filter: hue-rotate(180deg); }日常開發(fā)里我用這個屬性做“同一張圖換不同配色”的旁路方案。比如品牌色調(diào)整但暫時拿不到新素材時用hue-rotate把圖片色相偏移到一個近似值能應(yīng)急撐一段時間。配合動畫還能做顏色自動循環(huán).hue-animate { animation: hueCycle 4s linear infinite; } keyframes hueCycle { to { filter: hue-rotate(360deg); } }在這個場景里角度單位本身沒有太多換算難度重點是理解“色相環(huán)一圈 360 度”的概念。這和背景漸變的角度、旋轉(zhuǎn)角度本質(zhì)上是一套體系一圈就是 360deg也就是 1turn。3. 工程化實戰(zhàn)變量、計算與數(shù)據(jù)驅(qū)動3.1 用 CSS 變量統(tǒng)一管理角度角度單位用久了你會發(fā)現(xiàn)真正讓項目變得難維護的不是“單位選錯”而是同一個角度散落在十幾個文件里設(shè)計師說“把主色漸變從 135 度調(diào)成 120 度”的時候你得全局搜索135deg再一個個替換。我用 CSS 變量把角度收口成一類語義變量之后這個痛點基本解決了:root { --angle-main: 135deg; --angle-hover: 120deg; --angle-loader: 1turn; } .hero { background: linear-gradient(var(--angle-main), #f00, #00f); } .action-btn:hover { transform: rotate(var(--angle-hover)); } .loader { animation: spin var(--angle-loader); }這樣設(shè)計變更時只需要改:root里的定義。變量名最好帶語義讓人一看就明白這是干什么的角度比如--angle-hero-bg比--angle-1好得多。這個習(xí)慣在多人協(xié)作的時候價值尤其大它能把“魔法數(shù)字”變成可讀、可追蹤的項目配置。3.2 用 calc 把百分比變成角度calc()配合角度單位最常見的需求就是把百分比轉(zhuǎn)成角度比如前面提到的進度環(huán)/* --p 為百分比數(shù)值如 45 表示 45% */ background: conic-gradient( #ff6b6b 0 calc(var(--p) * 3.6deg), #eee calc(var(--p) * 3.6deg) 360deg );這里的45 * 3.6deg就是 162deg視覺上正好是 45% 的環(huán)形進度。以后遇到“百分比和角度互相轉(zhuǎn)換”的需求記住這個系數(shù) 3.6 就夠用。我提一個容易踩的坑長度單位不能直接和角度單位換算。1.5rem、1.5px、10rpx這類長度單位和45deg是完全不同的物理量。不能寫calc(1.5rem 45deg)CSS 不會把它當(dāng)成一個合理的值結(jié)果就是整條聲明直接失效。有同學(xué)搜“css 1.5rem rpx”來查 rem 的換算跟角度單位是兩個體系要分清。不過在支持 CSS 三角函數(shù)的現(xiàn)代瀏覽器里長度和角度可以在同一個表達式中通過sin()、cos()參與計算/* 現(xiàn)代瀏覽器支持 */ .width-calc { width: calc(sin(45deg) * 100px); }這個功能還在持續(xù)演進實際用的時候要做兼容性確認。但至少說明一點角度單位在 CSS 里并不是孤立的存在它可以橋接長度、布局和幾何計算。3.3 JS 是弧度CSS 是角度數(shù)據(jù)驅(qū)動的旋轉(zhuǎn)前端做“鼠標跟隨旋轉(zhuǎn)”“拖拽旋轉(zhuǎn)”這類交互時必然要面對弧度到角度的轉(zhuǎn)換。JS 里Math.atan2()返回的結(jié)果是弧度而 CSS 的rotate()里寫deg更常見更直觀。一個經(jīng)典的鼠標跟隨箭頭示例div classarrow idarrow?/div.arrow { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; font-size: 38px; transition: transform 0.1s ease-out; }const arrow document.getElementById(arrow); arrow.addEventListener(mousemove, (e) { const rect arrow.getBoundingClientRect(); const centerX rect.left rect.width / 2; const centerY rect.top rect.height / 2; const dy e.clientY - centerY; const dx e.clientX - centerX; // Math.atan2 得到的是弧度 const rad Math.atan2(dy, dx); // 弧度轉(zhuǎn)角度 const deg (rad * 180) / Math.PI; arrow.style.transform rotate(${deg}deg); });為什么我非要轉(zhuǎn)成deg因為rotate(${deg}deg)寫出來后續(xù)調(diào)試時看 DevTools 里的計算值一目了然。如果你直接寫rotate(${rad}rad)也不是不行但每次看樣式的第一反應(yīng)都要在腦子里換算一下排查問題就多一道障礙。團隊協(xié)作里可讀性和統(tǒng)一性比“少寫一行轉(zhuǎn)換代碼”重要。如果你想把 JS 計算出的角度交給 CSS 變量也可以這樣組合arrow.style.setProperty(--arrow-angle, ${deg}deg);.arrow { transform: rotate(var(--arrow-angle)); }這樣數(shù)據(jù)和樣式解耦得更徹底動畫過渡只需要在 CSS 里寫transition: transform 0.1s就能生效。3.4 CSS 三角函數(shù)的進階玩法前面提到了sin()、cos()這里稍微展開一下。CSS 的值類型系統(tǒng)里角度參與三角函數(shù)的支持度已經(jīng)逐步成熟。語法類似.six-side { width: calc(sin(60deg) * 100px); }實際項目中你可以用它們計算正多邊形頂點坐標、扇形邊界點甚至做一些簡單的幾何布局。比如你在做六邊形導(dǎo)航菜單時每個頂點的坐標可以通過cos(60deg)、sin(60deg)計算出來然后賦給clip-path: polygon()里的坐標。雖然目前還有一個兼容性過渡期但趨勢已經(jīng)很明顯CSS 要開始吃下更多“計算型”的活了。對角度單位來說這意味著它不再只是視覺參數(shù)還是一個可以參與幾何運算的數(shù)學(xué)量。4. 常見問題與避坑記錄4.1 漸變方向總搞反0deg 到底朝哪這是我在新手群里見過最多的問題?！盀槭裁磍inear-gradient(0deg, #f00, #00f)是紅下藍上不是紅上藍下”因為 CSS 的漸變角度不是數(shù)學(xué)里的“極角”而是以“頂部方向”為零點、順時針旋轉(zhuǎn)的角度。所以0deg的方向是向上漸變就從下往上鋪。想從上往下鋪得寫180deg或者to bottom。我的經(jīng)驗是心里不確定時先用關(guān)鍵字to top、to bottom、to left、to right寫出明確方向再把關(guān)鍵字換算成角度寫進需求里。比如明確要“從左上到右下”就直接寫to bottom right或135deg不要在 45、135、225 之間瞎猜。4.2 動畫角度單位混用轉(zhuǎn)圈數(shù)怎么不對有同學(xué)問為什么from 0deg到to 1turn視覺上只轉(zhuǎn)了 270 度這個問題的根源在于混淆了“角度數(shù)值”和“旋轉(zhuǎn)結(jié)果”。CSS 動畫的插值是根據(jù)數(shù)值計算的。from { transform: rotate(0deg) }到to { transform: rotate(1turn) }確實是從 0 轉(zhuǎn)到 360 度。但如果起點不是 0比如from { transform: rotate(90deg) }終點是1turn插值就是從 90 到 360視覺上只轉(zhuǎn)了 270 度。這里和deg還是turn沒關(guān)系關(guān)鍵是起止數(shù)值的差。如果你想讓元素“從當(dāng)前位置再轉(zhuǎn)一整圈”應(yīng)該保持動畫使用的遞增數(shù)值一致。比如keyframes spin { from { transform: rotate(0turn); } to { transform: rotate(1turn); } }這個動畫每次從 0 開始轉(zhuǎn)到 1 圈。想要兩圈就改成2turn。如果你在做連續(xù)無限旋轉(zhuǎn)animation: spin 1s linear infinite配合to { transform: rotate(1turn) }是最穩(wěn)妥的不要從180deg轉(zhuǎn)到1turn除非你確實想做“只轉(zhuǎn)半圈”的效果。另外一點負角度表示逆時針。rotate(-90deg)等于rotate(270deg)但從動畫過程看一個是逆時針轉(zhuǎn) 90 度一個是順時針轉(zhuǎn) 270 度視覺路徑完全不同。做動效時如果你發(fā)現(xiàn)方向反了先檢查是不是角度符號寫反其次再檢查animation-direction是不是reverse。4.3 兼容性與團隊規(guī)范deg在所有瀏覽器里都是最穩(wěn)的包括老項目里還在用的舊內(nèi)核瀏覽器。turn在現(xiàn)代瀏覽器里也幾乎無壓力但一些老舊的瀏覽器版本對非deg的單位支持并不全尤其是turn和grad在部分 CSS 屬性里會出現(xiàn)解析異常。所以業(yè)務(wù)代碼我建議這樣分層需要最大兼容性的支付、后臺系統(tǒng)統(tǒng)一用deg內(nèi)部系統(tǒng)、工具型項目可以放心用turn做旋轉(zhuǎn)動畫grad能不用就不用我也踩過一個看起來很小、實際很折騰的坑某個項目里模塊 A 用了background: linear-gradient(90grad, ...)模塊 B 用了90deg。同事在聯(lián)調(diào)時怎么調(diào)都覺得顏色方向不一致最后才發(fā)現(xiàn)是兩個單位混用了。所以團隊里最好有一份不成文的規(guī)定項目里角度單位只允許出現(xiàn)deg和turn邏輯代碼里出現(xiàn)grad或rad時必須有注釋說明來源。4.4 容易被忽略的細節(jié)單位、零值和旋轉(zhuǎn)中心關(guān)于0的簡寫前面提過一次這里再強調(diào)一遍CSS 允許0不帶單位但在calc()和變量組合的場景中建議統(tǒng)一帶單位。比如:root { --angle: 0deg; /* 而不是 --angle: 0 */ }因為如果你寫--angle: 0后面calc(var(--angle) 45deg)在某些瀏覽器解析里可能會出問題。帶上單位雖然只多打幾個字符卻可以減少一類很隱蔽的解析故障。還有一個特別經(jīng)典的定位問題元素旋轉(zhuǎn)是繞transform-origin進行的默認值是50% 50%也就是元素中心。如果某個按鈕旋轉(zhuǎn)后跑位了先別懷疑角度計算錯了先檢查transform-origin是不是被別的樣式改過。尤其在做儀表盤指針、時鐘這類繞某一點旋轉(zhuǎn)的效果時一定要主動設(shè)置旋轉(zhuǎn)中心.clock-hand { transform-origin: bottom center; transform: rotate(30deg); }角度單位再準確旋轉(zhuǎn)中心錯了視覺結(jié)果就是全錯的。這是所有剛接觸rotate()的人最容易忽略的一個點。最后說一下我的真實使用習(xí)慣聊到這兒四個單位的來龍去脈和常見玩法基本過了一遍。我自己這幾年的體會是日常寫deg多圈動畫和“圈數(shù)語義”用turn涉及 JS 計算時先用rad算出來再轉(zhuǎn)成deg交給 CSSgrad基本是備胎中的備胎。另外再分享一個小習(xí)慣但凡項目里出現(xiàn)多處用到角度的漸變、旋轉(zhuǎn)我都用 CSS 變量把它們收口成幾個語義變量比如--angle-hero、--angle-hover這種名字。設(shè)計想改角度改一個地方就行也不會出現(xiàn)“某處角度寫錯單位導(dǎo)致顏色方向不一致”這種排查起來很痛苦的問題。這個思路你要是也采納以后寫復(fù)雜動效和數(shù)據(jù)大屏?xí)r會省不少時間。