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