CSS 函数 - atan()

CSS 函数 **atan()** 是一个三角运算，它返回负无穷大和正无穷大之间值的反正切。

此函数计算以弧度为单位的角度，它是 **<angle>** 值，范围为 **-90** 度到 **90** 度，通过一次计算即可得到。

可能的值

函数 **atan(number)** 接受单个值作为参数。

**number** - 计算结果在 **-∞** 和 **+∞** 范围内的值。

返回值

任何数字的反正切总是给出 **<angle>**，该角度落在 **-90deg** 到 **90deg** 的范围内。

如果 **number** 为 **0⁻**，则结果为 **0⁻**。
如果 **number** 为 **+∞**，则结果为 **90deg**。
如果 **number** 为 **-∞**，则结果为 **-90deg**。

也就是说

**atan(-infinity)** 表示 **-90deg**。
**atan(-1)** 表示 **-45deg**。
**atan(0)** 表示 **0deg**。
**atan(1)** 表示 **45deg**。
**atan(infinity)** 表示 **90deg**。

语法

atan( <calc-sum> )

CSS atan() - 旋转元素

**atan()** 函数可以用来旋转元素，因为它返回 <angle>。以下示例演示了 **atan()** 的用法。

  
<html>
<head>
<style>
   div.box {
   width: 80px;
   height: 80px;
   background:  red;
   font-size: 25px;
   }
   div.boxA {
      transform: rotate(atan(-99999));
      margin-bottom: 20px;
      margin-left:20px;
   }
   div.boxB {
      transform: rotate(atan(-1));
      margin-bottom: 20px;
      margin-left:20px;
   }
   div.boxC {
      transform: rotate(atan(0));
      margin-bottom: 20px;
      margin-left:20px;
   }
   div.boxD {
      transform: rotate(atan(1));
      margin-bottom: 20px;
      margin-left:20px;
   }
   div.boxE {
      transform: rotate(atan(99999));
      margin-bottom: 20px;
      margin-left:20px;
   }
</style>
</head>
<body>
   <div class="box boxA">A</div>
   <div class="box boxB">B</div>
   <div class="box boxC">C</div>
   <div class="box boxD">D</div>
   <div class="box boxE">E</div>
</body>
</html>

打印页面