transform应用场景的探索

发表于 分类于

前言

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

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

立体hover效果

实现逼真的立体效果，肯定需要开启透视投影；而透视投影可以对某个元素单独设置，也可以对容器元素进行设置；

  • 单个元素：单个元素可以直接使用perspective()这个transform-function，这样当前元素就会具有透视投影效果，而不需要依赖其容器元素；
  • 容器元素：容器元素则可以直接通过perspective属性进行设置，这样就相当于创建了一个独立的相机空间，也就是其子元素默认具有相同的投影设置（前提是容器元素的transform-style``为preserve-3d）；这种方式再配合z坐标（即translateZ或者能够改变z坐标的变换），就能很方便地对整个容器内元素进行立体效果模拟；

img

Demo地址：3D transform button hover effect

模拟物理运动

弹性形变

在真实世界中，物体的运动或者冲击通常会产生形变，如果在类似的运动动画中加上模拟形变的效果，就会显得更加的真实；同样地，transform也可以模拟这些运动形变，模拟的诀窍就是观察这些运动形变的关键帧特点，以及形变和速度变化/大小之间的关系；

img

img

上述这些形变都是弹性形变，属于比较简单和直观的，通常是在一个或两个方向上不停地震荡，然后趋于稳定，因此模拟起来比较简单；下面是Demo地址：

刚体碰撞

如果是要模拟诸如刚体碰撞这样的效果，那就会有点棘手，因为其中除了会有物体变换，还会有变换中心（transform-origin）的改变，这样就需要观察关键帧在对应时间点应该使用哪个位置作为变换中心了；

img

Demo地址：CodePen - css transform animation: rigid body motion

注：刚体碰撞是刚体运动的一种，所谓的刚体运动简单地来说就是只有旋转和平移变换，即不发生形变；

视差滚动H5

所谓的视差滚动简单的可以理解为：视觉层面上有不同景深（即z坐标）的平面，当滚动时不同景深之间的移动速度有差异，这种差异就会形成视差；

利用transform的透视投影确实可以做到简单的视差滚动效果，但考虑到很多视差效果的H5交互作品通常具有很多场景元素，这时纯靠CSS那显然是吃力的，所以借助成熟的3D渲染框架来实现比较好，比如：PIXI，这类框架一般是基于图形学和游戏制作的框架概念实现的，因此更适合制作较更多元素更复杂的动画/交互展示；

这里有两个优秀的应用视差效果的H5可以推荐一下：

相关文档