CSS 三角函数生成器

可视化生成 CSS 三角函数（sin / cos / tan / asin / acos / atan / atan2 / hypot / pi / e，CSS Values Module Level 4， Chrome 111+ / Firefox 118+ / Safari 15.4+ 起支持，Baseline 2023）。内置8 组预设场景：圆形布局、波浪动画、极坐标 atan2、旋转时钟、螺旋线、玫瑰曲线、震动效果、简单 sin 波——参数实时调节，iframe 沙箱预览真实渲染。附带三角函数速查表：语法、参数范围、返回值、浏览器支持一目了然。适用于圆周布局、波浪与振荡动画、极坐标转笛卡尔、朝向计算、距离计算等现代 CSS 场景。所有处理在浏览器本地完成。

预设场景：

当前场景

圆形布局

N 个元素沿圆周均匀分布，使用 cos()/sin() 计算 x/y 坐标

cos()sin()pi()

参数调节

元素数量83 – 16圆周半径120px40 – 180px

三角函数速查

函数	语法	说明	返回值
`sin`	`sin(<角度>)`	正弦函数，参数为弧度或角度值	`返回 [-1, 1]`
`cos`	`cos(<角度>)`	余弦函数，参数为弧度或角度值	`返回 [-1, 1]`
`tan`	`tan(<角度>)`	正切函数，参数为弧度或角度值	`返回 (-∞, +∞)`
`asin`	`asin(<值>)`	反正弦，参数为 [-1, 1] 内的数值	`返回 [-π/2, π/2] 弧度`
`acos`	`acos(<值>)`	反余弦，参数为 [-1, 1] 内的数值	`返回 [0, π] 弧度`
`atan`	`atan(<值>)`	反正切，参数为任意实数	`返回 (-π/2, π/2) 弧度`
`atan2`	`atan2(<y>, <x>)`	双参数反正切，按 y/x 计算角度并确定象限	`返回 (-π, π] 弧度`
`hypot`	`hypot(<a>, <b>, ...)`	计算 √(a²+b²+...)，多参数欧几里得距离	`返回 [0, +∞)`
`pi`	`pi()`	圆周率常量，约 3.14159	`返回 3.14159...`
`e`	`e()`	自然常数，约 2.71828	`返回 2.71828...`

浏览器支持：Chrome 111+ / Firefox 118+ / Safari 15.4+（Baseline 2023）。参数单位为弧度，可使用 deg 后缀的角度值，浏览器自动转换为弧度。

实时预览Chrome 111+ / Firefox 118+ / Safari 15.4+ 生效

生成的 CSS

.stage {
  position: relative;
  width: 400px;
  height: 400px;
}
.dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #60a5fa, #2563eb);
}
.dot:nth-child(1) {
  transform: translate(calc(cos(0deg) * 120px), calc(sin(0deg) * 120px));
}
.dot:nth-child(2) {
  transform: translate(calc(cos(45deg) * 120px), calc(sin(45deg) * 120px));
}
.dot:nth-child(3) {
  transform: translate(calc(cos(90deg) * 120px), calc(sin(90deg) * 120px));
}
.dot:nth-child(4) {
  transform: translate(calc(cos(135deg) * 120px), calc(sin(135deg) * 120px));
}
.dot:nth-child(5) {
  transform: translate(calc(cos(180deg) * 120px), calc(sin(180deg) * 120px));
}
.dot:nth-child(6) {
  transform: translate(calc(cos(225deg) * 120px), calc(sin(225deg) * 120px));
}
.dot:nth-child(7) {
  transform: translate(calc(cos(270deg) * 120px), calc(sin(270deg) * 120px));
}
.dot:nth-child(8) {
  transform: translate(calc(cos(315deg) * 120px), calc(sin(315deg) * 120px));
}

常见问题

什么是 CSS 三角函数？解决了什么问题？

CSS 三角函数是 CSS Values Module Level 4 引入的数学函数集，包含 sin() / cos() / tan() / asin() / acos() / atan() / atan2() / hypot() 及常量 pi() / e()。它解决了 CSS 中三大痛点：
一是圆周布局，过去需要 JavaScript 计算每个元素的 translate(cos(θ)*r, sin(θ)*r)，现在直接用 CSS 表达式；
二是振荡动画，过去需用关键帧模拟 sin 波，现在可用 calc(sin(t) * amplitude) 直接计算；
三是朝向与距离，atan2(y, x) 计算指针朝向鼠标， hypot(a, b) 计算两点距离，原本必须用 JS。
这些函数从 Chrome 111+ / Firefox 118+ / Safari 15.4+ 起原生支持，已进入 Baseline 2023，生产环境可放心使用。

CSS 三角函数的参数单位是弧度还是角度？

参数单位是弧度（rad），但 CSS 容许使用 deg 后缀的角度值，浏览器会自动转换为弧度。例如：
- sin(60deg) 与 sin(1.0472rad) 等价，都返回 0.866
- cos(0deg) = 1，cos(90deg) = 0，cos(180deg) = -1
- tan(45deg) = 1（45° 是正切值 1 的特殊角）
返回值：sin / cos 返回 无单位数值 [-1, 1]； tan 返回无单位数值 (-∞, +∞)；asin / acos / atan / atan2 返回弧度值，需用 calc(... * 1rad) 才能用于 rotate() 等 CSS 属性。

sin() 与 cos() 在圆周布局中怎么用？

核心公式：圆周上某点的坐标为 (r*cos(θ), r*sin(θ))，其中 θ 是角度，r 是半径。
CSS 写法：用 calc() 嵌套 cos() / sin() 计算位移：
.dot:nth-child(1) { transform: translate(calc(cos(0deg) * 100px), calc(sin(0deg) * 100px)); }
.dot:nth-child(2) { transform: translate(calc(cos(45deg) * 100px), calc(sin(45deg) * 100px)); }
均分 N 个元素：每个元素角度 = 360deg / N * i，例如 8 个元素每 45° 一个。
优势：相比 JavaScript 计算并写入 transform，纯 CSS 表达式无需 JS，响应式调整半径只需改一个变量，性能更好。
本工具的"圆形布局"预设演示了完整代码，可调节元素数与半径实时预览。

atan2(y, x) 与 atan(x) 有什么区别？怎么用于朝向鼠标？

区别：atan(x) 只接受单个值，返回 (-π/2, π/2) 弧度，无法区分象限；atan2(y, x) 接受两个参数，根据 y 和 x 的符号确定象限，返回 (-π, π] 完整范围。
典型场景：计算指针朝向鼠标。
1. 用 JS 监听 mousemove，将鼠标相对指针中心的偏移量写入自定义属性：
element.style.setProperty('--mx', dx)； element.style.setProperty('--my', dy)
2. CSS 用 atan2 计算角度并旋转：
.pointer { transform: rotate(calc(atan2(var(--my), var(--mx)) * 1rad)); }
关键点：atan2 返回弧度，rotate() 接受度数，因此需 calc(... * 1rad) 把弧度数值标记为弧度单位。本工具的"极坐标 atan2"预设演示了完整代码。

hypot() 函数有什么用？怎么计算两点距离？

hypot(a, b, c, ...) 计算 √(a² + b² + c² + ...)，即欧几里得距离（向量的模长）。
双参数场景：计算二维平面上两点 (x₁,y₁) 与 (x₂,y₂) 的距离：
distance = hypot(x₂ - x₁, y₂ - y₁)
多参数场景：三维空间距离 hypot(dx, dy, dz)，或更高维度。
优势：相比手写 sqrt(pow(a,2) + pow(b,2))， hypot 语法简洁，且数值稳定性更好（避免大数平方溢出，避免小数平方下溢）。
典型用途：游戏开发中计算角色与目标距离、动画中根据距离调整缩放、物理模拟中的速度合成等。CSS 中常配合自定义属性由 JS 设置坐标差值。

pi() 与 e() 常量函数怎么用？

pi() 返回圆周率 3.14159...， e() 返回自然常数 2.71828...。它们必须带括号调用（不能写作 pi 或 e，否则会被识别为无效值）。
pi() 用途：
- 完整圆周的角度转换：360deg = 2 * pi() * 1rad
- 黄金角计算：calc(180deg * pi() * (3 - sqrt(5)) / 2) ≈ 137.508°，用于向日葵种子分布（见本工具"螺旋线"预设）
- 弧度与度数互转：1rad = 180deg / pi()
e() 用途：指数增长动画、对数尺度等。例如指数衰减： calc(exp(-1 * var(--t)) * 100%)。
两者常与 calc 配合，构造需要数学常量的表达式。

怎么实现 sin() 波浪动画？关键帧怎么写？

思路：把 0°–360° 的 sin 值用 4 个关键帧采样—— sin(0°)=0、sin(90°)=1、sin(180°)=0、 sin(270°)=-1、sin(360°)=0。
CSS 写法：
@keyframes bob {
  0% { transform: translateY(calc(sin(0deg) * 40px)); }
  25% { transform: translateY(calc(sin(90deg) * 40px)); }
  50% { transform: translateY(calc(sin(180deg) * 40px)); }
  75% { transform: translateY(calc(sin(270deg) * 40px)); }
  100% { transform: translateY(calc(sin(360deg) * 40px)); }
}
关键点：
1. sin(0deg) 是 0，sin(90deg) 是 1，乘以振幅得到实际位移；
2. 4 个关键帧足够平滑（浏览器会自动插值中间帧）；
3. 多元素波浪效果：用 animation-delay 错开相位，每个元素延迟 duration / count * i。
本工具的"波浪动画"和"简单 sin 波"预设演示了完整代码。

这个工具的预览安全吗？数据会上传吗？

完全安全，零数据上传。本工具的所有操作在浏览器本地完成：
- 预设切换、参数调节、CSS 代码生成、预览渲染全部在浏览器内存中完成，不发起任何网络请求。
- 预览区使用 iframe 的 srcdoc 属性渲染，HTML 与 CSS 完全隔离在 iframe 内，不会影响主页面样式，也不会被主页面样式污染。
- iframe 设置了 sandbox="allow-same-origin" 属性限制能力，预览内容无法执行脚本、提交表单或访问父页面（不含 allow-scripts）。
- 生成的 CSS 代码仅在你本地浏览器中，点击复制按钮才会写入剪贴板。
- 不读取 navigator 等浏览器信息，不写入 Cookie，无任何追踪行为。
无需注册、无需登录、无广告，适合处理任何 CSS 三角函数与生产场景。

CSS 三角函数生成器

圆形布局

常见问题

相关工具

相关博客