做前端這幾年CSS里的角度單位我前后踩過不少坑。平時寫個rotate(45deg)、linear-gradient(135deg)沒太大感覺可一旦要做多圈旋轉(zhuǎn)動畫、圓錐漸變、數(shù)據(jù)驅(qū)動的旋轉(zhuǎn)效果deg、grad、rad、turn這四個單位之間的換算關(guān)系一下子就繞人了。好在這東西本身并不復雜只是很少有人系統(tǒng)整理過。這篇文章我就把 CSS 角度單位一次講透每個單位是什么、該怎么換算、實際項目里選哪個更合適并附上我在真實場景里反復驗證過的代碼和避坑經(jīng)驗。前端新手可以把它當掃盲文寫過一段時間 CSS 的同學也能在這里找到一些工程化寫法少走點彎路。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ū)別但它解決了一個問題當你需要表達“轉(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)域比如工程測繪、導航坐標轉(zhuǎn)換里因為百分制的換算在某些儀器讀數(shù)上更省事。在 Web 前端里你大概率不會在正規(guī)的設(shè)計稿或需求文檔里看到“某元素旋轉(zhuǎn) 150grad”這種描述。為什么還要認識它因為你會“看得到它”。偶爾打開一些第三方生成的 CSS 代碼或者翻到某些老教程里面可能出現(xiàn)grad。這時候你要能反應(yīng)過來100grad 不是“100 度”而是直角。如果當成deg去理解整個布局都會偏而且偏得很奇怪。1.4 rad數(shù)學與前端銜接的橋梁rad是弧度數(shù)學課上的老朋友。它的定義是圓弧長度等于半徑時這段弧所對應(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ù)學函數(shù)的返回值都是弧度。也就是說只要你的旋轉(zhuǎn)角度是 JS 算出來的那它十有八九是rad單位。這時候你就需要做一次弧度到角度的換算再把結(jié)果交給 CSS。這個場景我會在后面的數(shù)據(jù)驅(qū)動部分專門展開。1.5 換算速查表與選型建議先把四個單位的核心換算關(guān)系列出來方便后面查單位一整圈直角半圈換算特點deg360deg90deg180deg最直觀grad400grad100grad200grad百分制rad6.2832rad1.5708rad3.1416rad與 JS 數(shù)學函數(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我的選型建議很簡單日常習慣寫成deg它是溝通成本最低的單位多圈動畫、帶有“圈數(shù)”語義的場景寫成turn跟 JS 數(shù)學打交道時先用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負責畫一圈一圈的波紋模擬雷達的環(huán)狀刻度。conic-gradient是一個圓錐漸變from 0deg表示從 12 點方向開始先是不透明的綠色到60deg處變成透明后面60deg 360deg的區(qū)域就全是透明。配合旋轉(zhuǎn)動畫整體就像一根雷達光束在順時針掃射。這里如果你換掉角度單位效果會有微妙差別。比如把from 0deg改成from 90deg起始的掃描線就從“正上方”變成了“正右方”。這種方向控制力是角度單位在視覺層最直接的體現(xiàn)。順便提一句常見的熱搜詞“css 漣漪光圈擴散”。如果只是做一個水波擴散的漣漪其實用不到角度transform: scale()加opacity就夠了。但如果你想做的是“雷達式掃描 波紋擴散”的復合效果掃描線就必須依賴角度單位。這兩種動效要分開理解別混為一談。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。當--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ù)分布圖的時候可以替代復雜的 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好得多。這個習慣在多人協(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 不會把它當成一個合理的值結(jié)果就是整條聲明直接失效。有同學搜“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); }實際項目中你可以用它們計算正多邊形頂點坐標、扇形邊界點甚至做一些簡單的幾何布局。比如你在做六邊形導航菜單時每個頂點的坐標可以通過cos(60deg)、sin(60deg)計算出來然后賦給clip-path: polygon()里的坐標。雖然目前還有一個兼容性過渡期但趨勢已經(jīng)很明顯CSS 要開始吃下更多“計算型”的活了。對角度單位來說這意味著它不再只是視覺參數(shù)還是一個可以參與幾何運算的數(shù)學量。4. 常見問題與避坑記錄4.1 漸變方向總搞反0deg 到底朝哪這是我在新手群里見過最多的問題?！盀槭裁磍inear-gradient(0deg, #f00, #00f)是紅下藍上不是紅上藍下”因為 CSS 的漸變角度不是數(shù)學里的“極角”而是以“頂部方向”為零點、順時針旋轉(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ù)怎么不對有同學問為什么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ù)值的差。如果你想讓元素“從當前位置再轉(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()的人最容易忽略的一個點。最后說一下我的真實使用習慣聊到這兒四個單位的來龍去脈和常見玩法基本過了一遍。我自己這幾年的體會是日常寫deg多圈動畫和“圈數(shù)語義”用turn涉及 JS 計算時先用rad算出來再轉(zhuǎn)成deg交給 CSSgrad基本是備胎中的備胎。另外再分享一個小習慣但凡項目里出現(xiàn)多處用到角度的漸變、旋轉(zhuǎn)我都用 CSS 變量把它們收口成幾個語義變量比如--angle-hero、--angle-hover這種名字。設(shè)計想改角度改一個地方就行也不會出現(xiàn)“某處角度寫錯單位導致顏色方向不一致”這種排查起來很痛苦的問題。這個思路你要是也采納以后寫復雜動效和數(shù)據(jù)大屏時會省不少時間。