CSS的角度单位:deg|grad|rad|turn

2,206 阅读1分钟

角度的单位

在transform中常用到,旋转角度。

deg

Degress,度,一个圆为360度

grad

Gradians,梯度。一个圆为400梯度

rad

Radians,弧度。一个圆为2pi弧度。

turn

Turns,圈,一个圆为1圈。

代码示例

HTML

<div class="deg">deg</div>
<div class="grad">grad</div>
<div class="rad">rad</div>
<div class="turn">turn</div>

CSS

body{
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100vh;
}
div{
  width: 100px;
  height: 50px;
  background-color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 1px #aaa;
}
.deg{
  transform: rotate(90deg);
}
.grad{
  transform: rotate(90grad);
}
.rad{
  transform: rotate(90rad);
}
.turn{
  transform: rotate(.25turn);
}

[codepen.io/walkingp/pe…]