网页元素--角度

Posted 2020-08-09 礼拜16

deg 角度，配合 变形属性 transform 的 rotate ( num deg) 来使用，意思指为旋转多少角度。如果不指明圆心，默认为dom节点左上角顺时针开始旋转。

.deg{
    height: 100px;
    background: #eee;
    -moz-transform: rotate(2deg);
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);          //顺时针方向旋转 2 度
}

grad 梯度，配合 变形属性 transform 的 rotate ( num grad) 来使用。如果不指明圆心，默认为dom节点左上角逆时针开始旋转。

.grad{
  background: #027F78;
  height: 100px;
  -webkit-transform: rotate(2grad);
  -moz-transform: rotate(2grad);
  -ms-transform: rotate(2grad);
  transform: rotate(2grad);       //逆时针方向旋转 2 度
  }

角度中含梯度，同样的高度，可以模拟出一个三维图形

<div class="deg">
  <div class="grad"></div>
  <div class="rad">弧度</div>
  <div class="turn">转圈</div>
</div>

rad 弧度，配合 变形属性 transform 的 rotate ( num rad) 来使用，不好控制

.rad{
  background: #555555;
  height: 200px;
  -webkit-transform: rotate(2rad);
  -moz-transform: rotate(2rad);
  transform: rotate(2rad);
  }

turn 转圈，容器内的元素相对转圈的容器，在旋转，旋转的圆心不好控制，num 最大为 1

.turn{
  background: #027F78;
  height: 200px;
  -webkit-transform: rotate(.7turn);
  -moz-transform: rotate(.7turn);
  -ms-transform: rotate(.7turn);
  transform: rotate(.7turn);
  }