CSS 函数

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

此函数计算以弧度为单位的角度，它是范围内的 <angle> 值-90 度到 90 度，只需一次计算。

可能的值

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

  • number - 计算得出的值范围为 -∞ 和 +∞。

返回值

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

  • 如果数字为 0⁻，则结果为 0⁻。

  • 如果数字为 +∞，则结果为 90deg。

  • 如果数字为 -∞，则结果是-90deg。

即

  • atan(-infinity) 代表-90deg。

  • atan(-1) 代表-45°。

  • atan(0) 代表0°。

  • atan(1) 表示 45 度。

  • atan(infinity) 表示 90 度。

语法

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>