简介
在过去的两年，越来越多的同事、朋友和其他不认识的童鞋进行移动web开发的时候，都使用了transformjs，所有必要介绍一下，让更多的人受益，提高编程效率，并享受编程乐趣。（当然transformjs不仅仅支持移动设备，都能正常使用transformjs）
传送门官方网站：
Github地址：https://github.com/AlloyTeam/AlloyTouch/tree/master/transformjs
npm install css3transform
APITransform(domElement, [notPerspective]);
通过上面一行代码的调用，就可以设置或者读取 domElement的"translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ"！
方便吧！
使用姿势....log(domElement.translateX )
传统的CSS3编程的问题以前，我们一般使用animate.css、zepto/jQuery的animate方法或者tween.js+css3进行交互特效编程。总结下来有三个缺点：
不直观看下面这张图：
顺序影响结果，不直观。那么为什么会是这个结果？可以通过new WebKitCSSMatrix(transform_str)对比最终的matrix。
这也直接说明了矩阵不符合交换律。AB!=BA
不直接zepto姿势：
)
translate3d: '0,10px,0'非常不方便，无法step递进递减控制。更别提配合一些运动或者时间的库来编程了。可能你会反驳'ease-out'不就可以实现缓动吗？但是如果我需要让x和y以及z分别对应不同的缓动函数，这种基于字符串编程的形式就费劲了~~
这里还需要注意的是，zepto里的顺序也会影响结果。因为其最后也是拼成string赋给dom元素。
tween.js姿势
target .Tween(position) .) .delay(1000) .easing(TWEEN.Easing.Elastic.InOut) .t_str........);
使用字符串的方式，看着就心累。更别提写的过程要遭受多少折磨。
animate.css姿势:
@keyframes pulse scale3d(50% scale3d(1.05, 1.05, 1.05); } to scale3d(1, 1, 1); } }
animate.css封装了一大堆关键帧动画，开发者只需要关心添加或者移除相关的动画的class便可以。这一定程度上给交互特效带来了极大的遍历，但是要有硬伤：
不方便transform的旋转点基准点默认是在中心，但是有些是时候，不系统在中心，我们传统的做法是使用transform-origin来设置基准点。
注意，是另一个属性transform-origin，而不是transform。但是如果需要运动transform-origin呢？这种设计是不是就废了？有没有需要运动origin的场景？这个在游戏设计中是经常会使用的到，这个以后另外单独开篇再说，事实就是，有场景是需要运动origin来达到某种效果。
transformjs基于上面种种不便，所以有了transformjs！
开始使用吧：
官方网站：
Github地址：https://github.com/AlloyTeam/AlloyTouch/tree/master/transformjs
相关文章
精彩导读
热门资讯
关注我们
