1. 首页
  2. CSS 菜鸟教程
  3. CSS 函数 - atan()

CSS 函数 - atan()

CSS 函数 atan() 是一个三角运算，它返回 负无穷大 和 正无穷大 之间值的反正切值。

此函数以弧度为单位计算角度，即 -90 度到 90 度范围内的 <angle> 值，只需一次计算。

可能的值

函数 atan（number） 接受单个值作为参数。

  • number - 一种计算方法，其值范围为 -∞ 和 +∞。

返回值

任何数的反正切总是给出一个 <angle> ，该落在 -90 度到 90 度的范围内。

  • 如果 number 为 0⁻，则结果为 0⁻。
  • 如果数字为 +∞则结果为 90deg。
  • 如果 number 为 -∞则结果为 -90deg。

那是

  • atan（-无穷大） 表示 -90deg。
  • atan（-1） 代表 -45deg。
  • atan（0） 代表 0deg。
  • atan（1） 代表 45deg。
  • atan（无穷大）代表 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>
<< CSS 函数 - atan2() CSS 函数 - acos() >>