<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3 transform封装</title> <style> * { margin: 0; padding: 0 } #box{ width: 200px; height: 200px; background: purple; } </style> </head> <body> <div id="box"></div> <script> // 2个参数 是获取属性值 // 3个参数 是设置属性值 // 前提 想要获取 必须先用此函数设置值 cssTransform(box,'rotate',30); cssTransform(box,'translate',60); cssTransform(box,'translate',0); // 初始化 console.log(cssTransform(box, 'translate')); function cssTransform( obj,attr,val ) { if( !obj.transform ){ obj.transform = {}; } if( arguments.length === 3 ){ // 设置 obj.transform[attr] = val; var str = ''; for( var key in obj.transform ){ switch ( key ){ case 'rotate': case 'rotateX': case 'rotateY': str += key + '('+obj.transform[key]+'deg) '; break; case 'translate': case 'translateX': case 'translateY': str += key + '('+obj.transform[key]+'px) '; break; case 'scale': case 'scaleX': case 'scaleY': str += key + '('+obj.transform[key]+') '; break; } obj.style.transform = str; } }else{ //获取值 val = obj.transform[attr]; if( typeof val === 'undefined'){ if( attr === 'scale' || attr === 'scaleX' || attr === 'scaleY' ){ val = 1 }else{ val= 0 } } return val; } } </script> </body> </html>