CSS3 transform封装 

<!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>

 

posted @ 2018-11-09 14:03  Dyla  阅读(349)  评论(0)    收藏  举报