概述
传统的使用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的版本，后续会进行优化。
