CSS角度的N种单位你可知道

发布时间:2019-02-22 作者:一点通


通常我们在做一些CSS动画的时候会让元素旋转,比如

.element{
    transform: rotate(45deg);
}

上面的CSS表示将该元素旋转45度,但是事实上CSS的角度取值并不止一种,下面我们就来看看其所有的可取值类型

deg

度。这也是我们经常会用到的,一个完整的圆是360deg

grad

百分度。这也是一种角的测量单位,一个完整的圆是400grad,也就是将一个圆400等分。这个其实平时用的不是很多

rad

弧度。一个完整的圆是弧度,也就是等于180deg

turn

圆。这可能是大家不知道的一个单位,一个完整的圆是1turn,所以1turn就等于360deg

本质上不同的单位其实是对一个圆进行不同的等分而已,grad400等分,deg360等分,rad2等分,turn1等分。此外这几个单位的浏览器支持度基本一致,都是IE9+

注意,数字和单位之间是不能有空格的。如果仅仅是一个静态的旋转效果,1turn4turn是一样的效果,但是如果运用到animationtransition动画中,转1圈和4圈就不一样了。