CSS 函式 - atan2()

CSS 函式atan2()是一個三角運算，它計算兩個值在-infinity和infinity範圍內的反正切。

此函式接受兩個引數，並返回表示-180°到180°之間<angle>（角度）的弧度數。

可能的值

函式atan2(y, x)以逗號分隔的兩個值作為引數。每個值可以是<number>，<dimension>或<percentage>。

兩個值必須是相同型別，但如果它們是<dimension>，它們也可以具有不同的單位。

y 座標 - 點的 y 座標。計算結果為<number>，<dimension>或<percentage>。
x 座標 - 點的 x 座標。計算結果為<number>，<dimension>或<percentage>。

返回值

atan2(y, x)函式採用給定的兩個值x和y，並使用它們來計算並返回正 x 軸與從原點到座標點(x, y)的直線之間的<angle>（角度）。

語法

atan2( <calc-sum>,  <calc-sum> )

CSS atan2() - 旋轉元素

atan2()函式可以用來旋轉元素，因為它會產生一個<angle>（角度）。下面的例子演示了使用atan2()旋轉盒子。

 
<html>
<head>
<style>
   div.box {
      width: 100px;
      height: 100px;
      background: skyblue;
      font-size:25px;
   }
   div.boxA {
      transform: rotate(atan2(2, 4));
      margin-left: 20px;
      margin-bottom:30px;
   }
   div.boxB {
      transform: rotate(atan2(4%, -5%));
      margin-left: 20px;
      margin-bottom: 40px;
   }
   div.boxC {
      transform: rotate(atan2(-2, 1.5));
      margin-left: 20px;
      margin-bottom: 35px;
   }
   div.boxD {
      transform: rotate(atan2(2, 3.5));
      margin-left: 20px;
      margin-bottom: 30px;
   }
</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>
</body>
</html>

列印頁面