语法1

如你所见，其他方式都不用变。只是第一个参数不仅仅可以传DOM元素，也可以传任意对象字面量等。

不卖关子，先看使用姿势

  1.     obj = {}
  3. Transform(obj)
  5. obj.rotateZ = 90
  7. element.style.transform = element.style.msTransform = element.style.OTransform = element.style.MozTransform = element.style.webkitTransform = obj.transform

看到了没有，你不仅可以传 DOM 元素进去，也可以传对象字面量。你可以把 obj.transform 打印出来，上面是选择了90度，所以它生成出来的 matrix 是：

  1. perspective(500px) matrix3d(0,1,0,0,-1,0,0,0,0,0,1,0,0,0,0,1)

你同样也可以关闭透视投影，如：

  1. var element = document.querySelector("#test"),
  2.     obj = {}
  3. //关闭透视投影
  4. Transform(obj, true)
  6. obj.rotateZ = 90
  8. element.style.transform = element.style.msTransform = element.style.OTransform = element.style.MozTransform = element.style.webkitTransform = obj.transform

生成出来的matrix是：

  1. matrix3d(0,1,0,0,-1,0,0,0,0,0,1,0,0,0,0,1)

那么如果用传统的姿势是？

  1. var element = document.querySelector("#test")
  3. Transform(element)
  5. var tween = new TWEEN.Tween({ translateX: element.translateX, translateY: element.translateY })
  6.     .to({ translateX: 100, translateY: 100 }, 1000)
  7.     .onUpdate(function () {
  8.         element.translateX = this.translateX
  9.         element.translateY = this.translateY
  10.     })
  11.     .start()
  13. requestAnimationFrame(animate)
  15. function animate(time) {
  16.     requestAnimationFrame(animate)
  17.     TWEEN.update(time)
  18. }

这里由于 TWEEN.Tween会去遍历所以的属性并且设置初始值，如tween里面的代码：

  1.  // Set all starting values present on the target object
  2. for (var field in object) {
  3.     _valuesStart[field] = parseFloat(object[field], 10)
  4. }

所以不能直接把 new TWEEN.Tween(element)。
因为在start之前，程序其实已经可以完全收集到所有需要to的属性，去运动便可以。我们可以自己封装一个tween去支持这种简便的方式。如：

  2.     this.obj = obj
  3.     return this
  4. }
  5. Tween.prototype = {
  6.     to: function (targets, duration, easing) {
  7.         this.duration = duration
  8.         this.targets = targets
  9.         return this
  10.     },
  11.     start: function () {
  12.         this.startTime = new Date()
  13.         this._beginTick()
  14.     },
  15.     _beginTick: function () {
  16.         var _startValues = {},
  17.             targets = this.targets
  18.         for (var key in targets) {
  19.             if (targets.hasOwnProperty(key)) {
  20.                 _startValues[key] = this.obj[key]
  21.             }
  22.         }
  23.         var self  = this
  24.         this._interval = setInterval(function () {
  25.             var dt = new Date() - self.startTime
  26.             for (var key in targets) {
  27.                 if (targets.hasOwnProperty(key)) {
  28.                     if (dt >= self.duration) {
  29.                         clearInterval(self._interval)
  30.                     } else {
  31.                         var p = dt / self.duration;
  32.                         var dv = targets[key] - self.obj[key]
  33.                         self.obj[key] += dv * p
  34.                     }
  35.                 }
  36.             }
  37.         }, 15)
  39.     }

这里为了简便使用setInterval去进行loop，当然可以换成其他方式。现在便可以使用如下方式：

  1. var element = document.querySelector("#test")
  2. Transform(element)
  3. var tween = new Tween(element)
  4.     .to({ translateX: 100, translateY: 100 }, 1000)
  5.     .start()

当然这有点跑题了。这里只是对比直接使用DOM挂载和使用第三方对象挂载的区别。第三方挂载有点隔山打牛的感觉。
当然..，还没有完，不仅仅可以上面那个样子。那还可以把css3transform完全当作一个计算工具来用。

语法2

姿势

  1. var matrix3d = Transform.getMatrix3D({
  2.     translateX: 0,
  3.     scaleX:2
  4. })
  5. console.log(matrix3d)

打印出来你将得到下面的值：

你想用这个值来干什么就干什么吧。看css3transform源码可以得到 Transform.getMatrix3D一共支持的属性：

  1. Transform.getMatrix3D = function (option) {
  2.     var defaultOption = {
  3.         translateX: 0,
  4.         translateY: 0,
  5.         translateZ: 0,
  6.         rotateX: 0,
  7.         rotateY: 0,
  8.         rotateZ: 0,
  9.         skewX: 0,
  10.         skewY: 0,
  11.         originX: 0,
  12.         originY: 0,
  13.         originZ: 0,
  14.         scaleX: 1,
  15.         scaleY: 1,
  16.         scaleZ: 1
  17.     };
  18.     for (var key in option) {
  19.     ...
  20.     ...
  21.     ...
  23. }

语法3

  1.  Transform.getMatrix2D(option)

不仅仅是3D matrix， css3transform也提供了2D的工具函数支持。

姿势

  1. var matrix2d = Transform.getMatrix2D({
  2.     translateX: 0,
  3.     translateY: 100,
  4.     scaleX:2
  6. console.log(matrix2d)

打印出来你将得到下面的值：

  • a 水平缩放
  • b 水平拉伸
  • c 垂直拉伸
  • d 垂直缩放
  • tx 水平位移
  • ty 垂直位移

那么得到这个Matrix2D有什么用?

  • 缩放：scale(sx, sy) 等同于 matrix(sx, 0, 0, sy, 0, 0)
  • 平移：translate(tx, ty) 等同于 matrix(1, 0, 0, 1, tx, ty)
  • 旋转：rotate(deg) 等同于 matrix(cos(deg), sin(deg), -sin(deg), cos(deg), 0, 0)
  • 拉伸：skew(degx, degy) 等同于 matrix(1, tan(degy), tan(degx), 1, 0, 0)

看css3transform源码可以得到 Transform.getMatrix2D一共支持的属性：