说到度数，你可能已经从生活中了解了很多关于他们相关的知识。在学校里学习几何课，做基本的木工活，进入外层空间或在图像编辑器中旋转一个元素等，都会有角度相关的身影。

在现实世界中，度数几乎是测量角度的单位。它在Web中同样是一个受欢迎的角色，也适用于我们将遇到的各种场景。幸运的是，在现实世界中的度数和虚拟世界中的度数有很多相似之处，所以在这篇文章中将来学习一些有关于度数相关的知识，然后深入了解一些细节。

那我们开始吧！

概述

在我们开始查看代码片段以及如何在HTML、CSS和JavaScript中使用度数单位之前，让我们花点时间来回忆一下什么是度数，并介绍一些关于度数的基本概念。首先，也是最重要的是：

你可能以前看过这样的一个图（一个圆）。它代表一个完整的旋转以及所有我们想要测量或指定的角度。需要记住的一个大细节是一个完整的旋转是由360度组成的。所有的角度都会在0至360度之间：

这并不意味着你不能处理超出0和360范围的度数值。负数和大于360度的值都是允许的。只是它们总是被归到0和360度范围内。看看下面两个标准化下变体：

在第一个变体中，我们指定的值实际上是-90度。得到的角度路径是顺时针的，并停止在270度（360 - 90）位置处。在第二个变体中，我们指定的值是420度。这意味着我们要做完一个完整的旋转（360度），然后继续旋转60度。在大多数情况下，第一个变体的最终度数值是270度，第二个变体的最终度数值是60度。角度的值是否为负值，并无关紧要。为了得到0至360之间的最终角度值，旋转的次数也不重要。同样，这只适用于大多数情况。在某些情况下，比如涉及到动画的情况下，我们采用最终角度度数值是非常重要的。我们稍后会谈到这个。

拓宽角度的视野

既然我们对角度的单位理论有了一定的了解，那么现在是时候现来深度的了解角度相关的知识。先来看看生活中有关于角度的例子在Web上的运用情况。

CSS中的旋转

角度最常用的用法之一就是在CSS中给旋转元素设置一个旋转角度（度数），依赖于CSS的transform属性中的rotate()函数，给这个rotate()函数传一个角度的值，让元素做相应的旋转。比如：

.rectangle {
    width: 200px;
    height: 100px;
    border: 10px solid #83B692;
    background-color: #BEE7B8;
    margin: 100px;

    transform: rotate(37deg);
}

给rotate()函数设置了一个37度的值，告诉元素围绕旋转原点（当然，旋转原点是可以人为设置的，这里不做探讨，因为其超出了我们要讨论的范围）旋转37度。最终这个.rectangle元素旋转后的效果如下图所示：

看到这样的旋转结果，你是不是感到有点奇怪？37度旋转出来的效果应该像下面这样才对，是吧？

我们在浏览器中看到的效果几乎与此相反。原因是与Web上定义旋转的方向有关系。现实中，角度值是随着逆时针方向增加，前面的概述部分有提到过。在Web上，角度值却是随着顺时针方向增加。

这似乎看上去有点奇怪，但事实就是这样，我们也无法改变。我们所要做的就是记住这样的差异性，并在实际使用的时候做相应的调整。

有关于CSS中旋转运用到的角度值，介绍到这也就差不多了。但有一点需要记住，之前我们介绍过，如果角度值低于0或者大于360度最终都会规化到0至360度范围内。大多数情况之下，负值和大于360度值都并不很重要。

下图很好的阐述了负值和大于