snowdream

前言

transform本质上就是一个仿射变换（即线性变换 + 平移），从CSS给定的transform-function可以看出，内置的函数将变换分为了2D变换和3D变换两种，但是从CSS规范来看，2D变换函数也只不过是3D变换函数的特殊形式而已，所以transform属性从原理上来说就是一个3D仿射变换函数。

关于仿射变换的详细数学解释，可以参考：
如何通俗地讲解「仿射变换」这个概念？ - 马同学的回答 - 知乎
https://www.zhihu.com/question/20666664/answer/157400568

仿射变换的核心就是变换矩阵了，因此transform属性的两个核心函数就是matrix()和matrix3d()；

前言

CSS3新增了filter属性用来专门设置元素的滤镜效果，不过目前只支持两种类型：

• 内置的滤镜函数：一些很常用的滤镜效果。
• url()：该方法可以引用一个svg滤镜元素来进行滤镜效果的设置。

前言

混合模式（blend mode）是计算机图形学中的一个概念，用于处理帧绘制中不同（相邻）层级图像之间的颜色混合方式；CSS3开始引入了混合模式的功能，可以先从原理开始了解。

注：以下RGB颜色分量范围为[0, 1]。

前言

border-radius从名字上看像是指定border-box的圆角半径，实际上在使用时大家也是这么用的；但是从W3C官方文档定义来看，border-radius属性不仅会影响border-box的形状，还能影响padding-box和content-box的形状；

border-radius的本质就是通过定义盒模型四个顶点的圆角半径，从而确定四个顶点圆角的中心位置，四个中心点绘制的椭圆/圆分别对border-box，padding-box和content-box进行裁剪；

所以border-radius本质上是一种特殊的形状裁剪语法，和clip-path类似；

前言

近几年，浏览器的特性频出，特别是一些开放浏览器底层控制的API规范，比如：WebAssembly，CSS Houdini，WebGL2.0等；这些底层API使得我们有机会定制更多的内容，而且拥有更好的性能，因此也就获得了更多的创造性。

关于CSS Houdini也是近两年才听的比较多，只知道大概是一个自定义CSS属性的利器，也没比较详细的去了解，算是比较前沿的CSS规范了；看过一些案例后，觉得CSS Houdini确实能够做出一些十分强大的展示和动效，是时候深入了解一下了。