<!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. 机器学习之K均值聚类

      聚类的核心概念是相似度或距离,有很多相似度或距离的方法,比如欧式距离.马氏距离.相关系数.余弦定理.层次聚类和K均值聚类等 1. K均值聚类思想   K均值聚类的基本思想是,通过迭代的方法寻找K个 ...

  2. vue教程(五)--路由router介绍

    一.html页面中如何使用 1.引入 vue-router.js 2.安装插件 Vue.use(VueRouter) 3.创建路由对象 var router = new VueRouter({ // ...

  3. Python基础总结之第二天从变量开始（新手可相互督促）

    hhh 为年薪20万加油ヾ(◍°∇°◍)ﾉﾞ 一.变量:(变量的命名规则:一般使用字母开头,可以使用下划线连接,以及数字) 正确的变量命名示范:   (尽量使用容易理解什么用途的词语) a1   na ...

  4. 安装win10体验

    没事干了,心血来潮弄了个win10专业版. 讲硬盘重新分区了,没办法,原来分的太少了. 使用winpe启动,直接将下载的win10还原到c盘,成功启动,设置的时候让提示输入id,没有啊?研究发现可以先 ...

  5. 完整使用JDBC访问数据库

    Connection con = null; PreparedStatement statement = null; ResultSet res = null; List<Student> ...

  6. 如何编译生成Linux-C静态链接库

    目标生成的静态库文件为:libnpcp.a 举例:我们有四个文件分别为:npcp.c npcp.h other.h main.c main.h在npcp.c里面#include "other ...

  7. let和const解构赋值

    1.let和const:最基础也很容易理解的,let是 声明一个变量,const是声明一个常量. 具体细节看如下实例代码 { let a=; console.log(a) } // console.l ...

  8. gulp压缩js文件报错日志

    输出 gulp-uglify 压缩js文件时报错信息 gulp.task('es6', function () { return gulp.src('src/main/webapp/bower_com ...

  9. nginx 之负载均衡 ：PHP session 跨多台服务器配置

    公司一个项目单点压力越来越大,考虑到稳定性和降压,使用nginx做负载均衡,将请求分发到多个docker上去,这里记录下PHP多服务器间的会话session共享问题,解决方案是把session单独存在 ...

  10. Android 开发环境之 VMware 虚拟机（android8.1）

    VM版本14 在官网下载androidx86的VMDK文件 官方下载地址 (VMDK文件是VMware的专用文件,比iso镜像文件安装要简便许多,内部已经配置好了,只需要按照虚拟机安装普通流程即可) ...