免费在线CSS三角函数生成器，支持sin()、cos()、tan()、asin()、acos()、atan()、atan2()函数，实时预览动画和布局效果。无需注册。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用sin/cos/tan实时预览 · 圆形布局 · 波浪动画 · CSS Values Level 5
效果预览
常见问题
CSS三角函数是什么？
CSS Values Level 5引入的数学函数，包括sin()、cos()、tan()等。允许在CSS中直接使用三角函数计算值，用于圆形布局、波浪动画等，无需JavaScript。
哪些浏览器支持？
Chrome 111+、Firefox 108+、Safari 15.4+、Edge 111+均已支持。
参数是什么单位？
使用角度或弧度：deg(度)、rad(弧度)、grad(梯度)、turn(圈)。如sin(90deg)=1。
有什么实际用途？
圆形布局、波浪动画、旋转运动、动态大小等。用cos()/sin()计算位置，比关键帧动画更优雅。
sin()/cos()返回值范围？
返回-1到1的无单位数字。需乘以具体值：translateX(calc(sin(45deg) * 100px))≈70.7px。
CSS三角函数生成器能做什么？
CSS三角函数生成器是一款专为CSS Values Level 5三角函数设计的可视化工具，支持sin()、cos()、tan()等CSS数学函数，实时预览圆形布局、波浪动画、椭圆轨道等效果，自动生成可用的CSS代码。
CSS三角函数生成器的核心功能
- 4种演示模式：圆形布局、波浪动画、椭圆轨道、脉冲缩放
- 实时预览：调节参数立即看到效果变化
- 自动生成CSS：一键复制可直接使用的CSS代码
- 参数可调：元素数量、半径、动画速度自由控制
CSS三角函数生成器应用场景
圆形菜单：用sin()/cos()实现环形导航菜单，无需JavaScript计算位置。
波浪动画：用sin()创建平滑的波浪效果，比关键帧动画更优雅。
加载动画：椭圆轨道和脉冲缩放效果，纯CSS实现。
关于CSS三角函数生成器的扩展知识
CSS三角函数在2023年被所有主流浏览器支持。它们属于CSS Values and Units Level 5规范，与calc()、min()、max()、clamp()等函数配合使用。角度单位支持deg、rad、grad、turn。sin()和cos()返回-1到1的无单位数字，需乘以具体值使用。