snowdream

前言

shape-outside这个属性实在是太冷门了，要不是去研究<basic-shape>数据类型，还真不会发现这个属性；但是其兼容性也还算可以，PC端完全没问题，移动端iOS是支持比较好的，而安卓端则不太支持：

shape-outside是CSS Shapes Module Level 1规范中提出的一个属性，用于设置浮动元素周围内联元素对其包裹的形状，也就是说借助shape-outside属性可以使得浮动元素周围的文字不再是围绕盒模型进行环绕，而是可以指定任意形状进行环绕，达到更丰富的文字环绕效果；比如：

前言

<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()；