概述

传统的使用transfrom，直接设置值，未免太过粗暴，且代码冗长复杂，例 :

var rotate = document.querySelector(".rotate");
rotate.addEventListener("touchstart",()=>{
    rotate.style.transform = rotate.style.transform = "rotate(90deg)";
})

因为存在这种情况，所以想办法把它简化，方便维护，可读性强。

开始封装

调用此方法可以是获取元素或是设置元素的值，以value判断，有则是设置值，无value则是取值

function cssTransform(element, prop, value) {
	// element  将要操作的元素
    // prop 将要进行的运动属性，缩放，旋转等等
    // value  具体值
   	
   	// 为了方便操作, 给该调用的元素定义一个属性
    var transform, 
        transformValue = "";
    if (element.transform === undefined) {
        element.transform = transform = Object.create(null);
        // 这里创建了一个纯净的对象 没有原型链 提高循环效率
    }
    // 设置元素
    if (value !== undefined) {
        element.transform[prop] = value;
        transform = element.transform;
        // 因为transform对象中可能不止一个属性，所以要对其进行遍历
        for (var name in transform) {
            switch (name) {
                case "scale":
                case "scaleX":
                case "scaleY":
                    transformValue += " " + name + "(" + transform[name] + ")";
                    break;
                case "rotate":
                case "rotateX":
                case "rotateY":
                case "rotateZ":
                case "skewX":
                case "skewY":
                    transformValue += " " + name + "(" + transform[name] + "deg)";
                    break;
                default:
                    transformValue += " " + name + "(" + transform[name] + "px)";
            }
        }
        element.style.WebkitTransform = element.style.transform = transformValue;
    } else {
        // 读取元素
        return element.transform[prop];
    }
}

使用说明

 var rotate = document.querySelector(".rotate");
     rotate.addEventListener("touchstart",()=>{
     	   // 设置属性 传三个值
         	cssTransform(rotate,"rotate",90);
          // 读取属性 传两个值便可
          console.log(cssTransform(rotate,"rotate");
  })

FAQ：
一个简单的版本就完成了，不难，当然还是很low的版本，后续会进行优化。