CSS 函数 - atan2()_CSS 菜鸟教程

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）的线之间的<角度>。

语法

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

CSS atan2（） - 旋转元素

atan2（）函数可用于旋转元素，因为它产生<角度>。以下示例演示了如何使用 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>

<< CSS 数据类型 - flex CSS 函数 - atan() >>