css支持三角函数

秒速五厘米 2022-02-14 08:15 260阅读 0赞

2 月底万维网联盟（W3C）CSS 工作组会议宣布了一项决议，批准在 CSS 标准中加入一批新函数，其中包括：

*  正弦函数 - sin()
 *  余弦函数 - cos()
 *  正切函数 - tan()
 *  反余弦函数 - acos()
 *  反正弦函数 - asin()
 *  反正切函数 - atan()
 *  使用两个参数 x 和 y 的反正切函数 - atan2()
 *  平方根函数 - sqrt()
 *  参数平方和的平方根函数 - hypot()
 *  开方 - pow()

![464de8415ce884f207fddffa7712976d64d.jpg][]

2001 年 CSS 的升级版本 CSS 3 发布以来，Web 开发人员对 CSS 的利用变得越来越自由多变，不再局限于简单地布局网页，CSS 3 带来的新变化主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块，大大丰富了开发者的想象力与创造力。

比如 CSS 现在能够编写复杂的动画，并支持像 Adobe Photoshop 中那样高级的图像滤镜。虽然目前 CSS 标准已经支持以下数学函数：

*  计算基本表达式 - calc()
 *  返回最小值 - min()
 *  返回最大值 - max()
 *  获取上限和下限之间的中间值 - clamp()

但是这远远不够，开发者一直需要它拥有处理图形角度并执行一些更高级数学运算的能力，以往这些需要从 JavaScript 层或预处理器去处理，但显然开发者更希望使用原生 CSS 语法去做这些事情，这样可以更加简单的方法处理角度并同步复杂的动画序列，而无需编写自定义 JavaScript 代码或加载庞大的动画库或游戏引擎。

在开发者强烈的要求下，W3C CSS 工作组终于正式宣布[批准在 CSS 标准中加入了一系列数学运算函数][CSS]。

看到这样的消息，不少开发者都沸腾了。在 Reddit 上他们[展开了热烈的讨论][Link 1]，有人认为这很自然，下一步显然是复数支持，然后是向量/矩阵，在能够使用 CSS 直接做出一款怪兽级别的项目之前，他们便不会满意；楼下就有人抛出了一个[几周前发布的项目][Link 2]，并指出虽然谈不上怪兽级，但是它完全采用 CSS 实现了 3D 效果。

![4708bf1790dac69089dd6cc60491b5b2571.jpg][]

反对派则表示：为什么 CSS 要这样搞？我认为 CSS 是用于将样式应用于 HTML 文档的东西，计算等操作应该在 JS 中完成。

他认为 CSS 应该轻量级，孤立的 Chrome 实例意味着不同的视图不能共享内存，所以必须复制一大堆东西，这样会导致内存冗余。

有人回复他：

*  一些 CSS 动画可以卸载到 GPU，释放 CPU 用于其它事情。
 *  JavaScript 是单线程的，CSS 动画可以放弃对转换的精细控制，以释放主线程。

还有一些人抛出一个观点，认为这直接变成了 CSS 的 TensorFlow binding：Tensorflow.css。

此外还有人认为官方是想让 Sass 中的所有内容成为 CSS 中的标准，也有人顺手吐槽了一把 Firefox：RIP my Firefox。

[464de8415ce884f207fddffa7712976d64d.jpg]: /images/20220214/7ceda843e0c64e7aadb783327be6badc.png
[CSS]: https://www.zdnet.com/article/css-to-get-support-for-trigonometry-functions/
[Link 1]: https://www.reddit.com/r/programming/comments/azho2c/css_to_get_support_for_trigonometry_functions
[Link 2]: https://keithclark.co.uk/labs/css-fps
[4708bf1790dac69089dd6cc60491b5b2571.jpg]: /images/20220214/8af3182d10734657bfcc1b747aa091ed.png