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>

列印頁面