<!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. C#3.0新增功能06 对象和集合初始值设定项

    连载目录    [已更新最新开发文章,点击查看详细] 使用 C# 可以在单条语句中实例化对象或集合并执行成员分配. 对象初始值设定项 使用对象初始值设定项,你可以在创建对象时向对象的任何可访问字段或属 ...

  2. [leetcode] 134. Gas Station （medium）

    原题 题意: 过一个循环的加油站,每个加油站可以加一定数量的油,走到下一个加油站需要消耗一定数量的油,判断能否走一圈. 思路: 一开始思路就是遍历一圈,最直接的思路. class Solution { ...

  3. Netty（DotNetty）原理解析

    一.背景介绍 DotNetty是微软的Azure团队,使用C#实现的Netty的版本发布.不但使用了C#和.Net平台的技术特点,并且保留了Netty原来绝大部分的编程接口.让我们在使用时,完全可以依 ...

  4. asn1学习笔记 约束

    继续看asn1语法详解,今天主要看了约束部分,包含 1.单值约束,包含枚举类型 enumerated . 如: Two ::= INTEGER(2) Day ::= ENUMERATED { mond ...

  5. 前端jQuery学习（一）

    把最近学习的前端框架jQuery整理一下.你可能听说过jQuery,因为他是JavaScript世界中使用最广泛的一个库. 江湖传言,全世界大约有80~90%的网站直接或间接地使用了jQuery.鉴于 ...

  6. JSP+java上传图片到服务器，并将地址保存至MYSQL + JSP网页显示服务器的图片

    这两天遇到个需求——用户头像修改功能. 查了好多资料,不是代码不全,就是某些高端框架,卡了好久,今已实现,分享给大家,如果有更好的方法,非常感谢可以在下方评论区写出 一.整体项目架构 二.web.xm ...

  7. C#文件操作 File（静态类）

      操作某一个文件/文件夹,需要一个文件的完整路径 一.使用File的静态方法进行文件操作 1 2 3 4 5 6 7 8 9 //使用file的静态方法进行复制             File.C ...

  8. 【Spring】org.springframework.web.context.ContextLoaderListen 报错

    详细信息如下: org.apache.catalina.core.StandardContext.listenerStart Error configuring application listene ...

  9. Go“一个包含nil指针的接口不是nil接口”踩坑

    最近在项目中踩了一个深坑--"Golang中一个包含nil指针的接口不是nil接口",总结下分享出来,如果你不是很理解这句话,那推荐认真看下下面的示例代码,避免以后写代码时踩坑. ...

  10. mysql新增一列为主键

    mysql新增一列为主键 由于一次疏忽在建表的时候忘记加上主键了, 但是目前来说表里面又有数据了,所以不能删表重建,所以需要新加一列主键 然后我就新加一列,并且为auto_increment,然后设置 ...