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>

打印页面