atan()

基线广泛可用

自 2023年3月起，此特性已在主流浏览器中得到支持，可在大多数设备和浏览器版本中正常使用。

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() 函数返回 <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

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

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));
}

结果

规范

CSS Values and Units Module Level 4
# trig-funcs

浏览器兼容性

启用 JavaScript 以查看此浏览器兼容性表。

参见

帮助改进 MDN

此页面对您有帮助吗？

是否

了解如何参与贡献

此页面最后更新于 2025年11月10日，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题