CSS 函数

CSS 函数 atan2() 是一个三角函数，用于计算 -infinity 和 infinity范围内的两个值的反正切值。

该函数接受两个参数并返回弧度。 <angle> 介于 -180° 和 180° 之间。

可能的值

函数 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>