做前端这几年我踩过最多的坑不是布局不是兼容性而是各种不起眼的“值”。比如旋转动画里 rotate(0.5turn) 被写成 rotate(0.5deg)转了半天纹丝不动再比如渐变里 linear-gradient(200grad, ...) 被当成 200deg 用出来的颜色方向怎么看怎么别扭。CSS 角度单位看起来就四个词——deg、grad、rad、turn但换算关系、适用场景、浏览器细节真掰开揉碎讲内容比想象中多。这篇就从实际项目里的旋转、渐变、交互动效出发把四种单位讲清楚顺便把那些容易踩的坑也一并排掉。这篇文章适合刚入门前端、正在补 CSS 基础的同学也适合写了好几年样式但从没用过 turn 和 rad 的朋友。不管你是用link引入外部样式还是直接在style里写角度单位的写法和行为都是一样的不用在引入方式上纠结真正需要花心思的是把“值”写对。1. CSS角度单位到底解决什么问题1.1 这些单位都会出现在哪CSS 里的角度单位不是孤立概念它散落在各种属性里只是很多时候你没意识到。最常见的当然是旋转transform: rotate(45deg)这个不用多说。再往下就是渐变linear-gradient(90deg, red, blue)里的 90deg 决定渐变线的方向conic-gradient(from 0.25turn at center, ...)里的 turn 决定起始色相位置。还有滤镜里的hue-rotate(90deg)色相旋转用的也是角度。倾斜用的skewX(10deg)同样是角度。这几年 CSS 还加入了三角函数sin()、cos()、tan()都接受角度单位在做圆形排列、波浪布局时会直接派上用场。也就是说只要你碰过旋转、渐变、滤镜、形变、动画就不可能绕开角度单位。问题在于浏览器并不在乎你用哪个单位它只认“这个角度对应多少度”最终渲染结果取决于角度数值本身而不是单位名称。所以搞清楚四者的换算不是学院派要求而是实战刚需。1.2 四种单位的定义与本质先给四个单位下个准确定义。deg 是 degree 的缩写中文叫“度”一个圆分成 360 份每份是 1deg。这是我们最熟悉的单位量角器、UI 设计稿、日常口语里的“旋转 90 度”说的都是它。grad 是 gradian 的缩写中文常译作“百分度”或“梯度”一个圆分成 400 份每份是 1grad。这个单位在测绘、建筑和一些欧洲国家的工程领域用得比较多但在 CSS 里极其少见你大概率不会主动用它。它出现在 CSS 规范里更多是为了保证单位体系的完整性。rad 是 radian 的缩写中文叫“弧度”它的定义是弧长等于半径时对应的圆心角为 1rad。一个圆的周长是半径的 2π 倍所以一圈是 2π rad约等于 6.28318rad。这是数学和编程领域最常用的角度单位JavaScript 里的Math.sin、Math.cos、canvas绘图全部用弧度。如果你写过 H5 动画、Canvas 特效或者可视化图表一定对它不陌生。turn 是“圈”的意思一个圆就是 1turn。它最符合直觉转一圈、转半圈、转四分之一圈说人话就该用 turn。从本质上看这四种单位描述的是同一个东西——角度大小。区别只是把“整圆”这块蛋糕切成了不同份数deg 切成 360 份grad 切成 400 份rad 用弧长比例来表达turn 直接以整圆为 1。生活化一点理解同样是“半圈”你可以说 180deg、200grad、约 3.14159rad也可以直接说 0.5turn。数值差异很大但物理含义一模一样。1.3 一圈的换算关系先给出最核心的等式建议直接截图保存单位一整圈的数值等价换算典型场景deg3601deg 1/360 圈UI 设计稿、日常开发grad4001grad 0.9deg工程制图、测绘习惯rad2π约 6.283181rad ≈ 57.2958degJS 数学计算、Canvasturn11turn 360deg动画圈数、旋转特效所以最常用的一组等式就是1turn 360deg 400grad 2π rad这四个写法在 CSS 里完全等价。也就是说rotate(360deg)、rotate(400grad)、rotate(6.28318rad)、rotate(1turn)渲染出来的效果一模一样。这一点很多人刚开始是不信的但浏览器确实会先把角度统一换算再输出旋转结果。2. 换算推导与项目里的单位选择2.1 换算推导上一节的等式可以直接背但我建议你还是理解一下推导因为实战里经常要做反向换算光背容易记反。既然一圈等于 360deg也等于 400grad那么1deg 400 / 360 grad 10 / 9 grad ≈ 1.1111grad 1grad 360 / 400 deg 0.9deg注意方向别搞混。很多人只知道“grad 和 deg 差不多”结果把 200grad 当成 200deg 用实际 200grad 180deg角度直接偏差 10%。再看 rad。一圈是 2π rad反推可得1rad 360 / (2π) deg 180 / π deg ≈ 57.2958deg 1deg π / 180 rad ≈ 0.017453rad如果你在 JS 里要做转换可以用这两行工具函数const degToRad (deg) deg * Math.PI / 180; const radToDeg (rad) rad * 180 / Math.PI;这一点在 Canvas 和 CSS 混用的项目里尤其重要。Canvas 的arc、rotate方法只认弧度CSS 的 transform 却习惯写度数两套体系来回切的时候漏掉转换就会让图形旋转方向完全乱掉。2.2 项目里怎么选单位四种单位功能等价但可读性和团队协作成本差别很大。我的习惯是这样第一常规 UI 开发默认用 deg。设计稿上标的是度数团队成员脑子里想的也是度数代码里写rotate(45deg)谁都能看懂。换 grad 反而要解释半天。第二动画涉及“圈数”时优先用 turn。比如一个无限旋转的 loading 图标keyframes里写from { transform: rotate(0turn); } to { transform: rotate(1turn); }一眼就知道转一圈。写rotate(360deg)也不是不行但如果是转两圈半rotate(2.5turn)明显比rotate(900deg)直观得多。第三和 JS 计算打通时用 rad。如果你从Math.atan2拿到一个弧度值直接拼到 CSS 变量里是最省事的没必要转成度数再塞回去。CSS 变量是字符串rotate(${rad}rad)完全合法。第四grad 在 Web 前端项目里基本不用。CSS 规范保留它纯粹是历史原因。如果你在代码里看到 grad第一反应应该是“有人写错了或者有特殊行业背景”而不是默默接受。2.3 CSS变量与calc中的角度单位现代 CSS 里角度单位可以放进变量也能参与运算。比如:root { --base-angle: 45deg; --spin: 0.5turn; } .box { transform: rotate(var(--base-angle)); } .box-spin { animation: spin 2s linear infinite; } keyframes spin { to { transform: rotate(var(--spin)); } }更妙的是CSS 的calc()允许角度类型内部混合运算。因为 deg、grad、rad、turn 都属于angle类型浏览器会统一换算所以下面这种写法是合法的.box { transform: rotate(calc(45deg 0.25turn)); }最终结果是45deg 90deg 135deg。这在做“基础角度 增量角度”的动效时很好用。不过要提醒一句老浏览器对calc()与不同类型角度混合的兼容性一般保守项目里还是尽量统一单位不要为了炫技给自己挖坑。3. 实操场景渐变、旋转、动画与交互3.1 渐变角度linear-gradient 与 conic-gradient 的坑渐变是角度单位最容易翻车的地方。linear-gradient的角度表示渐变线的方向它的 0deg 指向正上方角度顺时针增加。简单记就是0deg to top 90deg to right 180deg to bottom 270deg to left默认值是 180deg也就是从上到下的渐变。很多人会误以为linear-gradient(45deg)是从右下角到左上角其实它指的是渐变线方向朝向右上颜色沿垂直渐变线的方向过渡。刚开始不熟悉可以先写to top right这种关键词再换成角度。conic-gradient的用法更直接它从某个起始角开始绕圆心铺颜色.conic { background: conic-gradient(from 0.25turn at 50% 50%, red, yellow, lime, blue); }这里0.25turn就代表从 90 度方向开始顺时针铺一圈。用 turn 写的好处是能直接看出起点在圆的“四分之一处”比写 90deg 更有画面感。另外说一个非常常见的需求字体渐变。代码如下.text-gradient { background: linear-gradient(120deg, #f00, #00f); -webkit-background-clip: text; background-clip: text; color: transparent; }这套写法里120deg 直接决定文字颜色从哪个方向开始过渡。想要文字高光从左上到右下可以试试145deg想要从上到下就用180deg。角度不同视觉效果差很多建议多调几个值对比感受一下。3.2 transform旋转与不同单位的等效写法旋转用transform: rotate()时四种单位可以任意切换。下面四个类名效果完全相同.rotate-deg { transform: rotate(360deg); } .rotate-grad { transform: rotate(400grad); } .rotate-rad { transform: rotate(6.28318rad); } .rotate-turn { transform: rotate(1turn); }注意CSS 里旋转的正方向是顺时针负值是逆时针。rotate(-90deg)等于逆时针转 90 度也等于rotate(0.75turn)。这在做菜单展开、箭头方向切换时非常常见。还有一个容易忽略的点rotate()是围绕transform-origin旋转的默认原点是元素中心。如果你改变了原点比如transform-origin: left top那么同样rotate(0.25turn)的结果是围绕左上角转视觉差异非常明显。排查旋转类 bug 时先确认原点再看角度单位顺序不能反。3.3 animation里turn的优势写动画时 turn 的优势会被放大。看一个加载动画.spinner { width: 40px; height: 40px; border: 4px solid #ddd; border-top-color: #333; border-radius: 50%; animation: spin 1s linear infinite; } keyframes spin { from { transform: rotate(0turn); } to { transform: rotate(1turn); } }这里如果用rotate(360deg)表达力其实也够。但如果你想要一个转两圈半再停下来的动效rotate(2.5turn)和rotate(900deg)的可读性差距就出来了。在关键帧里写圈数能让任何接手代码的人秒懂动画逻辑。配合alternate交替模式turn 还能做摆动效果keyframes swing { from { transform: rotate(-0.125turn); } to { transform: rotate(0.125turn); } } .element { animation: swing 1s ease-in-out infinite alternate; }0.125turn就是 45 度用来做钟摆、摇晃、指针摆动都合适比写-45deg、45deg更有节奏感。3.4 鼠标移入小案例旋转加涟漪光圈扩散把角度单位和交互结合最典型的是“鼠标移入后图标旋转”的效果。CSS 里处理鼠标移入用:hover伪类就能实现不需要写 JavaScript 事件。下面这个按钮鼠标移入时图标转四分之一圈同时背景冒出一圈涟漪光圈扩散效果正好把transform、角度单位和伪元素过渡串起来。button classaction-btn span classbtn-icon↻/span span classbtn-text刷新/span /button.action-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border: none; border-radius: 8px; background: #2d6cdf; color: #fff; cursor: pointer; } .btn-icon { display: inline-block; transition: transform 0.4s ease; } .action-btn:hover .btn-icon { transform: rotate(0.25turn); } .action-btn::after { content: ; position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.6), transparent 70%); opacity: 0; transform: translate(-50%, -50%) scale(0); transition: transform 0.6s ease, opacity 0.6s ease; } .action-btn:hover::after { opacity: 1; transform: translate(-50%, -50%) scale(2.5); }这里0.25turn就是 90 度但比90deg更能表达“轻轻转一下”的动态幅度。顺便说一句按钮里的图标和文字要在一行对齐用display: inline-flex加align-items: center是最省事的方案比手动调vertical-align和line-height稳得多。很多人给图片和文字排一行时拼命调 margin其实问题出在父容器的对齐方式上。3.5 滤镜与三角函数中的角度单位角度单位不只在形变里出现。filter: hue-rotate(90deg)会让元素整体色相旋转 90 度hue-rotate(0.5turn)则旋转半圈效果相当于把颜色往互补方向拉。做主题切换、状态提示时这个属性配合 turn 写起来很直观.success-box { filter: hue-rotate(0turn); } .warning-box { filter: hue-rotate(0.25turn); }另外CSS 原生三角函数也接受角度单位。比如想做一个宽度随角度变化的正方形.dynamic-width { --angle: 30deg; width: calc(100px * cos(var(--angle))); }cos(30deg)返回约 0.866所以宽度约 86.6px。这个能力在实现圆形菜单、波浪布局、齿轮齿条效果时非常有用。不过要注意兼容性现阶段更稳妥的做法是先用 JavaScript 算好数值再通过 CSS 变量传入避免在关键业务页里直接依赖新特性。4. 常见问题与排查技巧实录4.1 deg 与 grad 混用角度直接偏差10%这是我在 review 代码时见过最多的问题。有人从某个老项目里复制了一段linear-gradient(100grad, ...)把它当成 100 度直接用结果渐变方向和预期偏差 10 度肉眼看不大但沿着边缘切分的时候就很明显。排查思路很简单凡是看到 grad先把数值乘以 0.9 换成 deg 再判断。100grad 90deg200grad 180deg400grad 360deg。避免混用靠的是约定。团队内部可以规定业务代码只管用 deg 和 turn除非有特殊需求禁止出现 grad。这个约定成本几乎为零能省掉大量排查时间。4.2 rad 数值“看着太小”导致误判rad 的数值在视觉上很小一圈才 6.28半圈 3.1490 度大约是 1.57。这就导致很多人看到rotate(1rad)时觉得“转了 1 个单位应该差不多 90 度”实际它只有约 57.3 度。想转 90 度对应的弧度值是Math.PI / 2约 1.5708rad而不是 1.5rad。如果你在 CSS 里直接写rotate(1.5rad)实际角度只有约 85.94 度转不足 90 度。这种误差在视觉上很隐蔽但在连续拼接的路径动画里会越积越大。建议做法是CSS 侧尽量不直接手写 rad 数值要么用 deg要么通过 JS 计算后把弧度值拼进样式const angleRad Math.atan2(dy, dx); element.style.transform rotate(${angleRad}rad);4.3 turn 与 transform-origin 的配合turn虽然直观但容易让人忽略“旋转是围绕哪个点进行的”。默认原点是元素中心rotate(0.25turn)是绕中心顺时针转 90 度如果你需要绕右下角旋转必须显式声明.box { transform-origin: right bottom; transform: rotate(0.25turn); }现实项目里仪表盘指针、雷达扫描、时钟指针都依赖自定义原点。雷达扫描这类效果还会结合圆锥渐变和 mask角度单位在整个链路里都起着关键作用。另外还有一个隐藏坑多个 transform 组合时旋转会改变后续位移的坐标系。translateX(20px) rotate(0.25turn)和rotate(0.25turn) translateX(20px)结果完全不同。前者先平移再旋转后者先旋转再沿旋转后的坐标轴平移。排查时如果发现元素位置诡异除了看角度数值还要看 transform 的书写顺序。4.4 动态角度JS与CSS变量协作动态角度需求很常见拖拽旋转、鼠标跟随、进度环、游戏摇杆。我的建议是尽量通过 CSS 变量把 JS 计算出的角度传给样式而不是直接操作el.style.transform里的字符串拼接这样动画层和逻辑层更干净。const handleDrag (event) { const rect element.getBoundingClientRect(); const centerX rect.left rect.width / 2; const centerY rect.top rect.height / 2; const angle Math.atan2(event.clientY - centerY, event.clientX - centerX); element.style.setProperty(--drag-angle, ${angle}rad); };.element { transform: rotate(var(--drag-angle)); }这里Math.atan2返回弧度值CSS 变量直接接收rad字符串中间不需要任何度数转换从源头避免单位错乱。4.5 兼容性速查与降级方案四种角度单位在现代浏览器里都能正常使用但部署到真实项目时还是要留心老环境。turn在非常老的浏览器里支持度一般IE 基本不认识grad虽然历史更早但渲染引擎对它的精度处理普遍不上心容易出现微小偏差deg是最稳的选择。如果项目还要兼容旧浏览器建议按这个策略降级.box { transform: rotate(90deg); /* 降级路径所有浏览器认识 */ transform: rotate(0.25turn); /* 现代浏览器覆盖 */ }第二行会覆盖第一行但前提是浏览器认识0.25turn。不认识时它会忽略第二行保留第一行的 90deg。这套写法的好处是渐进增强不用等所有用户升级浏览器就能平稳过渡。CSS 变量同理老浏览器不认变量时可以先给属性写一个默认值再补变量版本.box { transform: rotate(45deg); transform: rotate(var(--angle, 45deg)); }最后想聊一点个人体会。入门前端那会儿我也觉得角度单位这种“小事”没必要专门研究反正设计稿给度数就写度数。后来做可视化项目需要在 Canvas、SVG、CSS 三个体系之间同步旋转角度才真正体会到底层单位不统一有多痛苦。现在我的默认选择只有两个给 UI 和动画用 deg 加 turn给 JS 计算用 rad。grad 基本不碰。这种“少而明确”的单位策略帮我省掉了大量调试时间。如果你正在做类似的项目建议也在团队里约定一套角度单位的用法并且把它写进代码规范里这比遇到问题再临时换算靠谱得多。
