snowdream

前言

<basic-shape>是一种特殊的CSS数据类型，用于表示使用基本形状函数，从而应用相应的形状或路径；目前支持<basic-shape>类型的属性有：

• shape-outside：该属性用于指定周围内联元素环绕时所包围的形状；
• clip-path：该属性用于指定所属盒模型的裁剪形状；
• offset-path：该属性用于指定元素移动的路径，属于offset属性中的一个；

前言

现在H5中应用了大量的CSS动效，而这些动效很多都与transform属性相关（没办法，transform就是天生适合产生动效的），借助和分析比较典型的H5案例可以更好地应用transform属性；

前言

transform属性是CSS基于图形学中矩阵变换和投影变换实现的产物，因此理论上基于矩阵变换和投影变换的视角效果都可以使用transform实现；诸如canvas/webGL中常见的立体/3D效果，物理运动效果等等，都可以等价转化为transform中的变换函数，只不过CSS的控制粒度目前只能局限于关键帧，无法对动效进行每一帧的控制（那种通过js来修改css的方式也算不上是控制每一帧，倒是目前还在实现中的CSS Houdini规范可以做到）；

下面只是一些简单的初步探索，后续可能会发现更多有趣的应用。

前言

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滤镜元素来进行滤镜效果的设置。