<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>CSS3 transform封装</title>

    <style>

        * {

            margin: ;

            padding:

        }

        #box{

            width: 200px;

            height: 200px;

            background: purple;

        }

    </style>

</head>

<body>

    <div id="box"></div>

    <script>

        // 2个参数 是获取属性值

        // 3个参数 是设置属性值

        // 前提 想要获取 必须先用此函数设置值

        cssTransform(box,'rotate',);

        cssTransform(box,'translate',);

        cssTransform(box,'translate',);  // 初始化

        console.log(cssTransform(box, 'translate'));

        function cssTransform( obj,attr,val ) {

            if( !obj.transform ){

                obj.transform = {};

            }

            if( arguments.length ===  ){ // 设置

                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 =

                    }else{

                        val=

                    }

                }

                return val;

            }

        }

    </script>

</body>

</html>

CSS3 transform封装的更多相关文章

  1. 【CSS3】 理解CSS3 transform中的Matrix(矩阵)

    理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...

  2. 小心 CSS3 Transform 引起的 z-index "失效"

    https://www.douban.com/note/343402554/ http://www.jb51.net/css/255811.html 最后我直接removeClass;把transfo ...

  3. CSS3 transform rotate（旋转）锯齿的解决办法

    -moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度.本以为轻而易举,可遇到了问题.在Fireofx中显示正常, ...

  4. 理解CSS3 transform中的Matrix(矩阵)

    一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...

  5. CSS3 transform对普通元素的N多渲染影响

    一.一入transform深似海 一个普普通通的元素,如果应用了CSS3 transform变换,即便这个transform属性值不会改变其任何表面的变化(如scale(1), translate(0 ...

  6. CSS3 transform 属性

    CSS3 transform 属性 语法: transform: none|transform-functions; 值 描述 none 定义不进行转换. matrix(n,n,n,n,n,n) 定义 ...

  7. 基于css3 transform实现散乱的照片排列

    分享一款基于css3 transform实现散乱的照片排列.这是一款简单零散的css3相册排列特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class= ...

  8. 理解CSS3 transform中的Matrix(矩阵)——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2427 一.哥,我被你 ...

  9. CSS3 Transform变形理解与应用

    CSS3 Transform变形理解与应用 Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开 ...

随机推荐

  1. VUE动态(自动)Loading【绑定到URL】，同页面多个Loading互不冲突

    需求来源:当使用React时,使用 umi loading 很方便,页面对http请求发生改变时,也会自动改变loading的相关状态(true/false) 对VUE插件进行找寻,发现没找到合适内容 ...

  2. AndroidStudio使用genymotion模拟器

    安装Genymotion之前首先要安装好virtualbox这个软件 virtual官方网站:https://www.virtualbox.org/ genymotion的官方网站: https:// ...

  3. python课堂整理7---集合

    前面小节: sep 用来控制每个元素间的间隔符号 print("alex", "dabai", "liu", sep = "&qu ...

  4. linux初学者-用户管理篇

    linux的用户管理是非常以后工作中重要的一部分,也是linux系统安全的防线. 1.用户理解 那么到底什么是用户呢?用户就是系统使用者的身份. 用户是以怎样的方式储存在计算机中的呢?在系统中用户存储 ...

  5. kubernetes CRD 开发指南

    扩展kubernetes两个最常用最需要掌握的东西:自定义资源CRD 和 adminsion webhook, 本文教你如何十分钟掌握CRD开发. kubernetes允许用户自定义自己的资源对象,就 ...

  6. 用wxpy管理微信公众号,并利用微信获取自己的开源数据。

    之前了解到itchat 乃至于 wxpy时 是利用tuling聊天机器人的接口.调用接口并保存双方的问答结果可以作为自己的问答词库的一个数据库累计.这些数据可以用于自己训练. 而最近希望获取一些语音资 ...

  7. IOC容器-Autofac在MVC中实现json方式注入使用

    在你阅读时,默认已经了解IOC和autofac的基本用法, 我在最近的我的博客项目中运用了IOC autofac 实现了依赖注入 由于我的项目时asp.net MVC所以我目前向大家展示MVC中如何使 ...

  8. 原创:微信小程序开发要点总结

    废话不多少,下面是对我从开发微信小程序的第一步开始到发布的总结,觉得对您有帮助的话,可以赞赏下,以对我表示鼓励. 一:首先注册登录微信公众平台,这个平台很重要,以后查文档全在上面看.https://m ...

  9. 【Android】Field requires API level 4 (current min is 1): android.os.Build.VERSION#SDK_INT

    刚遇到了这个问题: Field requires API level 4 (current min is 1): android.os.Build.VERSION#SDK_INT 解决方法: 修改 A ...

  10. Scala的常用小技巧

    1."RichString.java".stripSuffix(".java") == "RichString" "http:// ...