聊聊Web中的度数单位

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

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

那我们开始吧!

概述

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

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

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

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

拓宽角度的视野

既然我们对角度的单位理论有了一定的了解,那么现在是时候现来深度的了解角度相关的知识。先来看看生活中有关于角度的例子在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度最终都会规化到0360度范围内。大多数情况之下,负值和大于360度值都并不很重要。

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

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css/understanding-degrees-on-the-web.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部