<!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. RecyclerView下拉加载集合越界问题

    问题描述 在做毕业设计app中遇到这样一个问题,使用RecyclerView进行下拉加载数据的时候,比如我每次让它加载5条数据,当服务器端数据总数刚好是5的倍数的时候,不会出现下拉加载数据集合越界的问 ...

  2. C语言入门9-2-模块大致一览

    字母数字 判断字符是否为英文字母isalpha()判断字符是否为数字isdigit()判断字符是否为英文字母或数字isalnum()判断字符是否为小写字母islower()判断字符是否为大写字母isu ...

  3. [leetcode] 63. Unique Paths II (medium)

    原题 思路: 用到dp的思想,到row,col点路径数量 : path[row][col]=path[row][col-1]+path[row-1][col]; 遍历row*col,如果map[row ...

  4. Java EE产生的背景

    为了满足开发多层体系结构的企业级应用的需求,Java公司的创始人Sun公司在早期的J2SE(Java 2 Platform Standard Edition)基础上,针对企业级应用的各种需求,提出了J ...

  5. mysql 不同版本下 group by 组内排序的差异

    最近发现网上找的 group by 组内排序语句在不同的mysql版本中结果不一样.   建表语句:   SET FOREIGN_KEY_CHECKS=0;   -- ---------------- ...

  6. tornado并发性能测试

    1.带server2.0装饰器 接口访问数据库查询 并发100 平均每秒处理11.8次请求 平均响应时间6944ms 接口不做任何处理 并发100 平均每秒处理99.9次请求 平均响应时间3ms 并发 ...

  7. IO流3

    public class Test1 { public static void main(String[] args) throws Exception { //第二个参数,表示是否向末尾追加,tru ...

  8. 【OpenCV-ANN神经网络自动驾驶】树莓派OpenCV神经网络自动驾驶小车【源码+实物】

    没错!这个是我的毕业设计!!! 整个电子信息学院唯一一个优秀毕业设计 拿到这里炫耀了 实物如下: 电脑端显示效果: 自动驾驶实现过程: 1. 收集图像数据.建立局域网,让主机和Raspberry Pi ...

  9. scripts may close only the windows that were opened by it 浏览器JS控制无法关闭当前页面

    非window.open形式打开的子页面用js的window.close在chrome下就会提示scripts may close only the windows that were opened ...

  10. MySQL操作命令梳理(2)

    一.表操作 在mysql运维操作中会经常使用到alter这个修改表的命令,alter tables允许修改一个现有表的结构,比如增加或删除列.创造或消去索引.改变现有列的类型.或重新命名列或表本身,也 ...