atan()

Baseline 2023

Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

CSS 函数 atan() 为三角函数，返回介于 -∞ 和 +∞ 之间的数的反正切值。此函数含有单个计算式，此式返回表示介于 -90deg 和 90deg 之间的 <angle> 的弧度数。

语法

css
/* 单个 <number> 值 */
transform: rotate(atan(1));
transform: rotate(atan(4 * 50));

/* 其他值 */
transform: rotate(atan(pi / 2));
transform: rotate(atan(e * 3));

参数

atan(number) 函数仅接受一值作为其参数。

number

解析为介于 -∞ 和 +∞ 之间的 <number> 的计算式。

返回值

number 的反正切值总将返回介于 -90deg 和 90deg 之间的 <angle>。

  • 若 number 为 0⁻，则结果为 0⁻。
  • 若 number 为 +∞，则结果为 90deg。
  • 若 number 为 -∞，则结果为 -90deg。

即：

  • atan(-infinity) 表示 -90deg。
  • atan(-1) 表示 -45deg。
  • atan(0) 表示 0deg。
  • atan(1) 表示 45deg。
  • atan(infinity) 表示 90deg。

形式语法

<atan()> = 
  atan( <calc-sum> )  

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | '/' ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

示例

旋转元素

由于 atan() 函数返回 <angle>，故可用于旋转（rotate）元素。

HTML

html
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>

CSS

css
div.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(orange, red);
}
div.box-1 {
  transform: rotate(atan(-99999));
}
div.box-2 {
  transform: rotate(atan(-1));
}
div.box-3 {
  transform: rotate(atan(0));
}
div.box-4 {
  transform: rotate(atan(1));
}
div.box-5 {
  transform: rotate(atan(99999));
}

结果

规范

Specification
CSS Values and Units Module Level 4
# trig-funcs

浏览器兼容性

BCD tables only load in the browser

参见