<!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. python基础练习 斐波那契数列

    转载于知乎刘奕聪的方法 一 f = [1, 1]print([f.append((f[-1] + f[-2])) or f.pop(0) for i in range(100)]) ///  f.ap ...

  2. 【css系列】六种实现元素水平居中方法

    一.前言 居中效果在CSS中很是普通的效果,平时大家所看到的居中效果主要分为三大类:水平居中.垂直居中和水平垂直居中.而其中水平居中相对于后两者来说要简单得多.使用了css3的flexbox的属性轻松 ...

  3. 【MySQL】（六）锁

    开发多用户.数据库驱动的应用时,最大的一个难点是:一方面要最大程度地利用数据库的并发访问,另一方面还要确保每个用户能以一致的方式读取和修改数据.为此就有了锁(locking)的机制,同时这也是数据库系 ...

  4. python课堂整理11---函数即变量

    一.前向引用 函数即是变量,在调用前要先定义好. def bar(): print('from bar') def foo(): print('from foo') bar() foo() def f ...

  5. junit的Test不能使用，报错信息：Test is not an annotation type

    在使用junit的Test做测试时,注解@Test报错”Test is not an annotation type”,发现是因为测试类的类名命名为了Test,所以导致错误. 测试类类名不能直接命名为 ...

  6. form.elements[i]

    原生js操作form的一些方法,来看下面写的这个demo,这个demo是展示了一下form.eleemnts[i]的意义和用法: <!DOCTYPE html> <html lang ...

  7. python中对多态的理解

    目录 python中对多态的理解 一.多态 二.多态性 三.鸭子类型 python中对多态的理解 一.多态 多态是指一类事物有多种形态,比如动物类,可以有猫,狗,猪等等.(一个抽象类有多个子类,因而多 ...

  8. .net core开发从未如此简单，比abp更接地气

    在谈起java一家独大的时候,dotnet人员总是一边嘲笑大量滥竽充数的java从业者,一边羡慕人家的生态.以前是只能羡慕,现在dotnet core开源了,我们都可以为dotnet core的开原生 ...

  9. 4、一个打了鸡血的for循环（增强型for循环）

    对于循环,我们大家应该都不陌生,例如do-while循环,while循环,for循环,今天给大家介绍一个有趣的东西——打了鸡血的for循环(增强型for循环). 首先看代码,了解一下for循环的结构: ...

  10. MyBatis 二级缓存全详解

    目录 MyBatis 二级缓存介绍 二级缓存开启条件 探究二级缓存 二级缓存失效的条件 第一次SqlSession 未提交 更新对二级缓存影响 探究多表操作对二级缓存的影响 二级缓存源码解析 二级缓存 ...