<!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. TensorFlow笔记-文件读取

    小数量数据读取 这些只用于可以完全加载到内存中的小型数据集: 1,储存在常数中 2,储存在变量中,初始化后,永远不改变它的值 使用常量 training_data = ... training_lab ...

  2. 在工作中常用的Linux命令

    前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 之前写过一篇 < 在公司做的项目和自己在学校做 ...

  3. Python基础总结之第三天开始重新认识‘字符串’（新手可相互督促）

    年薪20万的梦想,又进了一步... 戏好多 ’字符串‘开始啦~ 字符串的定义:字符串可以用英文单引号或双引号又或者三引号包围起来. 为毛有单引号,还要有双引号和三引号??? 看案例吧: 字符串的其他使 ...

  4. IIS短文件名漏洞复现

    IIS短文件名漏洞复现 一.漏洞描述 此漏洞实际是由HTTP请求中旧DOS 8.3名称约定(SFN)的代字符(~)波浪号引起的.它允许远程攻击者在Web根目录下公开文件和文件夹名称(不应该可被访问). ...

  5. IntegerCache的妙用和陷阱

    转载自IntegerCache的妙用和陷阱 考虑下面的小程序,你认为会输出为什么结果? public class Test {     public static void main(String[] ...

  6. cachestat 安装文档

    安装环境:ubuntu18.04 安装步骤 1. 打开命令行,输入以下命令 sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys ...

  7. RestClient测试

    1,对象里面包含集合及字符串属性 {"roloeList":[{ "id":10001,"areaid":1,"name" ...

  8. 【Java】点击 JButton 修改 Jlabel 的文字和字体颜色

    要求: 点击 JButton 后执行一个方法 m(比较耗时),点击时改变 JLabel 的字体和颜色,方法 m 运行结束后再次修改 JLabel 的字体和颜色. 刚开始点击,都是方法 m 运行结束后, ...

  9. 重入锁的学习 （ReentrantLock）

    重入锁  :(ReentrantLock) 上锁 用reentrantLock.lock 方法 解锁 用reentrantLock.unlock 方法 上锁和解锁 必须配对 可以多重上锁 Reentr ...

  10. Windows上的Linux容器

    翻译自:https://docs.microsoft.com/en-us/virtualization/windowscontainers/deploy-containers/linux-contai ...