0%

前言

现在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滤镜元素来进行滤镜效果的设置。
阅读全文 »

前言

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

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

阅读全文 »