Transform.js 移动端 Web 网页开发动画库

Question

Transform.js 是一个移动端 Web 网页开发动画库，它扩展的是 animate() 与 css() 方法的功能。通过其引入的 CSS3 属性你可以完成一系列的动画效果，当然 transform.js 不仅仅支持移动设备，支持 CSS3 3D Transforms 的浏览器都能正常使用 transform.js。

特点

• transformjs 作为腾讯AlloyTeam移动开发利器之一，广泛应用于手Q Web、微信 Web 相关业务开发
• transformjs 专注于 CSS3 transform 读取和设置的一个超轻量级 JS 库，大大提高了 CSS3 transform 的可编程性
• transformjs 高度抽象，不与任何时间、运动框架捆绑，所以可以和任意时间、和运动框架轻松搭配使用
• transformjs 使用 matrix3d 为最终输出给 dom 对象，硬件加速的同时，不失去可编程性
• transformjs 拥有超级易用的 API，一分钟轻松上手，二分钟嵌入真实项目实战
• transformjs 扩展了 transform 本身的能力，让 transform origin 更加方便

安装

npm install css3transform

API

Transform(domElement, [notPerspective]);

Usage

Transform(domElement);//or Transform(domElement, true);

//set "translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ"
domElement.translateX = 100;
domElement.scaleX = 0.5;
domElement.originX = 0.5;

//get "translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ"
//console.log(domElement.translateX )

官方网站：http://alloyteam.github.io/AlloyTouch/transformjs/
Github地址：https://github.com/AlloyTeam/AlloyTouch/tree/master/transformjs