transform相关H5案例
前言
现在H5中应用了大量的CSS动效，而这些动效很多都与transform属性相关（没办法，transform就是天生适合产生动效的），借助和分析比较典型的H5案例可以更好地应用transform属性；
恕我直言，一看就不是什么正经猫【网易】
- 活动地址：http://gongyi.163.com/special/meowkingdom/
- 活动类型：创意
H5游戏 - 简介：这个活动的主体就是一个模拟俄罗斯方块的游戏，只不过把方块的形状用相应的不正经的猫姿势进行了替换；游戏使用的是
PIXI库进行搭建的，其余状态都是都是普通的H5元素，有比较多的动画，动画基本上都是图片拆解，然后部分使用transform进行动态变化；
上面这个是游戏部分，跟transform相关的部分是其他地方；
动画拆解
从上图可以看出，游戏前画面是有多处css动画的，而这些动画大多和transform有关：
-
中心旋转：即变换中心为默认的
center center；
-
边缘旋转：此处变换中心是图片的右边缘中心，即
right center；
-
缩放 +
opacity：放大 + 不透明度变低；
-
帧图片播放动画：这个马赛克动画实际上就是只有两帧的动画图片，然后循环播放；这个抖动本来还以为也是
transform模拟出来的，但看源码实际上就是一个四帧的动画图片进行的播放，毕竟仔细看这个动画有扭曲变化，这个transform目前真的无能无力……
-
backgroud-position：这个地方看似有点像缩放，但实际上就是图片在y方向变化而已；
2014腾讯互动娱乐年度发布会邀请函
- 活动地址：http://up.qq.com/2014/invitation/main.html
- 活动类型：单屏滑动页面
- 简介：这是一个典型的单屏滑动活动页，基本上就是滑动切换上下屏，每屏有不同的内容；主要关注点就是切换上下屏之间的过渡动画效果，以及每屏出现时小物件的活动轨迹和动画；
从上面看出，这里面确实有大量的CSS动画，而且很多都是和transform相关的，所以还是重点关注一下比较有趣的地方；
值得注意的地方
注：下面的gif图所展现的不一定是原速，因为可能是通过chrome浏览器自带的animation面板进行手动录制的；
关注游戏机这个图标的动画，可以明显的看出这个动画是组合动画，分为几个阶段：
-
中心旋转 + 放大 +
opacity变大 -
旋转 + 平移：这个阶段动画看起来像是沿着边缘进行旋转，但实际上看源码是边平移边旋转；
这个地方实际上是一组元素形成的扩散动画，每个元素本身的动画都是一致的，就是平移 + 旋转 + 不透明度变化，只是每个元素平移的方向不同，形成了扩散效果；
这个地方的三角形运动轨迹形似S，实际上动画就是利用连续两次的平移 + 旋转，然后旋转方向有所不同，形成连续且丝滑的运动轨迹；
这段开门的动画主要是利用透视投影，然后再进行绕Y轴向后旋转，形成立体的真实感；
