渐变和转角：CSS角度的无名英雄

角度和弧度很难表示。

梯度

转弯

这些单位有什么用？

例子！

我们应该在什么情况下使用它们？

浏览器支持

关于SVG的说明

结论

当一个设计感觉有点太静态，而你想给它增加一些动感（无论是动画还是简单的暗示），可以考虑给你的设计添加一些旋转或倾斜。

• 将用户头像稍微旋转一下，鼠标悬停时再旋转回来：Smashing Magazine
• 旋转部分图片并调整标题背景：条纹
• 各种加载指示器：loading.io
• 当然，还有那些令人印象深刻的CSS动画演示。

无论你如何使用它，归根结底，如果你要旋转或倾斜某个东西，那么你就是在处理角度。

对很多人来说，角度……令人望而生畏，甚至有些可怕。但我认为，只要使用不同的角度单位来定义角度，角度就很容易理解。

角度和弧度很难表示。

最常用的两个角度单位是我们既熟悉又讨厌的：度（° deg）和弧度（π rad）。度似乎是大家的默认单位，而且也确实没问题，我们都习惯了，但它的数学运算实在令人尴尬。（0°180deg和1°之间的中间值是什么270deg来着？）我猜，一提到弧度，很多人就会立刻想起高中三角函数课，想起当老师问3π/4的正切值时，他们努力不和老师对视的情景。

顺便吐槽一下：为什么画圆需要 2π，这样所有东西都只有原来的一半？为什么 (3/4)π 不就是圆的四分之三呢？我知道历史原因，但为什么我们还没都改用 τ 呢？

总之，如果你（包括我自己）也因为旋转涉及繁琐的单位和令人头疼的数学运算而感到焦虑，那么我有个好消息：CSS 实际上提供了四种不同的角度单位，而且在我看来，另外两种更容易使用。这些单位分别是梯度（gradiangrad）和旋转（ turn turn）。

梯度

旋转单位度数（ gradian ）实际上已经存在了几个世纪。它也被称为“公制度数”，因为它是在18世纪的法国与公制系统一起正式确立的。

似乎有些人对我们现在称之为英制单位的许多单位所使用的疯狂的数学运算感到厌倦（8 品脱等于 1 加仑，12 英寸等于 1 英尺，14 磅等于 1 英石……你们还好吗？），于是决定建立一个所有单位都基于 10 的幂的系统：100 厘米等于 1 米，1000 毫升等于 1 升，1000 克等于 1 千克等等。

角度也经历了类似的演变。有人建议用 400 个圆来代替 360 度，这样每个象限（或四分之一圆）就被分成100个部分。于是，梯度就出现了！一个完整的圆有400 个梯度。四分之一圆是 100 个梯度（在 CSS 中），半圆是 200 个梯度（）。这难道不比 360 度、90 度和 180 度更容易理解吗？100grad200grad

所以，梯度器很棒，我稍后会再谈到它们。但现在让我来告诉你我真正兴奋的单元。

转弯

旋转是我非常兴奋（或许有点过于兴奋）的众多小细节之一。但如果你已经做过一些与旋转相关的设计，尤其是动画设计，相信你很快就会有同样的感受。

当你设计动画或思考如何为设计添加旋转效果时，你是如何思考的？你可能不会用数字来思考。你可能会想：

• “我希望这个物体滚动进入视野。它滚动时最好能翻转两次。”
• “为什么我们不让鼠标悬停时图标旋转四分之一圈呢？那样或许会很酷。”
• “那个加载图标应该每秒旋转两圈。”

你通常不会用角度或弧度来思考。你会用整圈和部分圈数来思考。至少我是这样的。

现在想象一下，如果你可以直接告诉浏览器，告诉它你正在旋转的物体应该转多少圈，而无需转换成任何复杂的单位，那该多好。嗯，事实证明……你可以做到！这就是“转”的本质！

在 CSS 中，“一圈1turn”的意思就是“完整旋转一周”。换句话说，就是“转一圈”。（它显然也是一种比较标准化的角度测量单位。 ）

我喜欢把转弯次数看作是“透明的”角度单位，因为它们几乎算不上一个单位。它们只是上面问题的答案：“这个东西应该转多少圈？”或者换句话说，“这个东西应该转多少圈？ ”

这些单位有什么用？

让我们来比较一下角度、弧度和梯度之间的一些常见角度（全部四舍五入到小数点后两位）。

在任何情况下，我发现用梯度或转角来表示角度都是最容易阅读、理解和进行心算的。的确，我习惯于用度数来表示一些角度，比如常见的 30 度、90 度、180 度、270 度和 360 度。但是，一旦需要表示列表中没有的角度，就会立刻变得非常困难。问题在于，我习惯于用十进制来处理其他所有事情，从金钱到成绩再到我的年龄，所以我在十进制心算方面更有经验。

说到设计，其实重点不在于心算。关键在于将我想做的事情可视化，然后转化为代码。我觉得用渐变和旋转来处理这些事情会更容易，即使是常见的角度也是如此。

例如，如果我仔细思考，就能算出30度是90度象限的三分之一。但我无法在脑海中清晰地看到33.33grad30度，至少需要费一番功夫。然而，当我看到30度时，那些3个数字立刻让我联想到“三分之一”。我知道这个数字是什么样子，而且不知为何，即使角度相同，我也能更容易地想象出它是什么形状的角度。

例子！

你不可能写一篇关于代码特性的文章而不展示它，对吧？

我们应该在什么情况下使用它们？

再看一下表格，如果我在单个象限内进行大量动画，我可能就不想用旋转了。30deg转换成0.0833turn和60deg转换成0.1667turn，这两个对我来说都毫无意义。但我认为在单个象限内，渐变效果才是真正发挥作用的地方。所有东西基本上都变成了象限的百分比！这太棒了！

另一方面，对于大于一个象限的任何区域，我更喜欢使用“旋转”，尤其是旋转超过一个完整圆周的区域。

浏览器支持

如果您担心浏览器兼容性问题，请不必担心！这两个单元在所有主流浏览器（包括桌面和移动浏览器）中都已得到长期支持。请查看MDN 上关于<angle>CSS 类型的兼容性表格：

即使是IE 9 也完全支持渐变和转角。这项技术可以追溯到那么久远。所以不用担心浏览器兼容性问题。

关于SVG的说明

可惜的是，这些超棒的新单元在 SVG 动画中用不了，所以如果你喜欢手工绘制复杂的 SVG，那就没办法了，我真的很抱歉😢

遗憾的是，虽然 SVG 也使用 CSS，但它与 HTML 使用的 CSS 并不完全相同。正如Sara Soueidan在她关于 SVG 变换的精彩文章中指出的那样，SVG 使用的 CSS 版本中的角度总是没有单位，而且始终以度为单位。这真是太可惜了，因为 SVG 非常适合制作动画。但另一方面，我想现在大多数人通常都是使用编辑器来生成 SVG，不是吗？我自己不太了解这方面，所以算不上专家，但这只是我的个人看法。

结论

我想听听大家对这篇文章的反馈！这篇文章比较主观，所以我很想听听其他人对这些设备的看法。有没有人用它们做过大型项目？你们觉得怎么样？它们是不是因为某些我没想到的原因而表现很差？请告诉我！