1. 用jquery的css方法获取transform得到的是矩阵matrix,不利于获取translate的值,
优先使用dom.style.webKitTransform进行transform的读写

2. 从transform中读取translate的值方法

//jquery版本
function fGetTranslate($obj,type){
var transformMatrix = obj.css("-webkit-transform") ||
obj.css("-moz-transform") ||
obj.css("-ms-transform") ||
obj.css("-o-transform") ||
obj.css("transform");
var matrix = transformMatrix.replace(/[^0-9\-.,]/g, '').split(',');
var x = matrix[12] || matrix[4]; //translate x
var y = matrix[13] || matrix[5]; //translate y
if(type == 'x'){
return x;
}
else if(type == 'y'){
return y;
}
return '';
}
//dom版本
function fGetTranslate(obj,type){
var transform = obj.style.webkitTransform || obj.style.transform;
var aTrans = transform.replace(/[^0-9\-.,]/g, '').split(','),
res = '';
switch(type){
case 'x':
res = parseInt(aTrans[0]);
break;
case 'y':
res = parseInt(aTrans[1]);
break;
case 'z':
res = parseInt(aTrans[2]);
break;
default:
break;
}
return res || '';
}

 3.tansform的效果会按照层级进行叠加,在父元素上的动画会叠加到子元素上,子元素上的多个动画也可以拆分为

多层元素的多个动画

<div style="transform:translate(-10px,-20px) scale(2) rotate(45deg) translate(5px,10px)"></div>

其变换结果等效于:

<div style="transform:translate(-10px,-20px)">
<div style="transform:scale(2)">
<div style="transform:rotate(45deg)">
<div style="transform:translate(5px,10px)">
</div>
</div>
</div>
</div>

4.transform动画的逆转,必须将父元素的transform值倒过来写,值改为负值

<div style="transform:rotate(30deg) skew(45deg)">
<div style="transform:skew(-45deg) rotate(-30deg)">
</div>
</div>

5.transform-origin与translate的等价性

transformation matrix是这样计算规则:

[1] 从一个单位矩阵(identity matrix)开始
[2] 根据transform-origin的x、y、z坐标值,进行平移(translate)
[3] 从左向右依次对transform里的变换函数执行乘法
[4] 根据transform-origin的x、y、z坐标值,进行反向平移

transform-origin是使用translate进行两次方向相反的平移,transform-origin是translate的语法糖。

.avatar{
transform: rotate(30deg);
transform-origin: 200px 300px;
}

等效于:

.avatar{
transform: translate(200px, 300px) rotate(30deg) translate(-200px, -300px);
transform-origin: 0 0;
}

6.transform的matrix的含义

transform: matrix(a,b,c,d,e,f)

e和f 代表着偏移量translate,x和y轴
a和d 代表着缩放比例scale,x 和y轴
b和c 代表着斜切skew(具体参数和角度关系为, b-->tanθ y轴 c-->tanθ x轴 ,我们具体操作的时候还是要使用小数的)
abcd 四个参数代表着旋转,旋转 = 缩放 + 斜切(具体关系待查)

参考:https://segmentfault.com/a/1190000007421401
     https://segmentfault.com/a/1190000010688390?_ea=2553323

transform总结的更多相关文章

  1. CSS3 3D立方体效果-transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

  2. 深入node之Transform

    Transform流特性 在开发中直接接触Transform流的情况不是很多,往往是使用相对成熟的模块或者封装的API来完成流的处理,最为特殊的莫过于through2模块和gulp流操作.那么,Tra ...

  3. CSS 3 学习——transform 3D转换渲染

    以下内容根据官方规范翻译,没有翻译关于SVG变换的内容和关于矩阵计算的内容. 一般情况下,元素在一个无景深无立体感的平面(flat plane)上渲染,这个平面就是其包含块所处的平面.同时,页面上的其 ...

  4. CSS 3学习——transform 2D转换

    首先声明一点,transform属性不为none的元素是它的定位子元素(绝对定位和固定定位)的包含块,而且对内创建一个新的层叠上下文. 注意:可以通过 transform-box 属性指定元素的那个盒 ...

  5. Hilbert-Huang Transform(希尔伯特-黄变换)

    在我们正式开始讲解Hilbert-Huang Transform之前,不妨先来了解一下这一伟大算法的两位发明人和这一算法的应用领域 Section I 人物简介 希尔伯特:公认的数学界“无冕之王”,1 ...

  6. 【CSS3动画】transform对文字及图片的旋转、缩放、倾斜和移动

    前言:之前我有写过CSS3的transform这一这特性,对于它的用法,还不是很透彻,今天补充补充,呵呵 你懂的,小司机准备开车了. a)再提一提transform的四个属性 ①旋转--->ro ...

  7. CSS3和javascript中的transform

    在javascript中,WebkitTransform 大概相当于 transform .transform 为标准,WebkitTransform 适用于Webkit浏览器.js中的WebkitT ...

  8. CALayer的transform属性

    先来与View比较一下 View:transform -> CGAffineTransformRotate... layer:transform -> CATransform3DRotat ...

  9. rxjs5.X系列 —— transform系列 api 笔记

    欢迎指导与讨论:) 前言 本文是笔者翻译 RxJS 5.X 官网各类operation操作系列的的第一篇 -- transform转换.如有错漏,希望大家指出提醒O(∩_∩)O.更详细的资料尽在rxj ...

  10. NDT(Normal Distribution Transform) 算法(与ICP对比)和一些常见配准算法

    原文地址:http://ghx0x0.github.io/2014/12/30/NDT-match/ By GH 发表于 12月 30 2014 目前三维配准中用的较多的是ICP迭代算法,需要提供一个 ...

随机推荐

  1. 输入hostname -f提示:hostname: Unknown host

    解决方法:将/etc/hosts文件中的内容添加如下所示 127.0.0.1 localhost localhost.localdomain localhost4 localhost4.localdo ...

  2. bootstrap2文档的学习

    就像刚开始的 优雅,直观,强大的前端框架,让web开发更快,更容易,bootstrap给我的感觉就是把常用的布局,组件(导航,列表,按钮,表格),还有规范化颜色等等,同时它的遍历不至于此,他还支持了自 ...

  3. numpy.mean

    http://docs.scipy.org/doc/numpy/reference/generated/numpy.mean.html numpy.mean(a, axis=None, dtype=N ...

  4. c++ 软件下载 Dev cpp下载

    下载地址: 链接: https://pan.baidu.com/s/1hsiWQPY 密码: bdpn

  5. Linux磁盘I/O性能监控——iostat

    iostat命令可以查看CPU利用率和磁盘性能相关数据,有时候我们会觉得系统响应慢,传数据很慢,这个慢可能是多方面原因导致的,如CPU利用率高.网络差.系统平均负载高甚至是磁盘已经损坏了.对此,系统性 ...

  6. 洛谷P1111修复公路并查集改

    看了他们的题解感觉很震惊,为什么要用kruskal,这题要用到最小生成树吗??? 38行短短的程序就可以了,我觉得学习不是一种套用,套自己学的,而且题解很大一部分都是kruskal. 个人认为自己的程 ...

  7. MultipartFile 动态决定是否上传文件,解决不上传文件报错

    controller 接收参数   用 HttpServletRequest 代替 @RequestParam()  接收参数 picFile 前台 传文件的参数名字  ,   这样 前段 传 nul ...

  8. linux系统监控工具glances

    glances linux系统自带了很多系统性能监控工具,如top,vmstat,iftop等等,还有一款监视工具glances,它能把其他几个监控的指标都集于一身.Glances是一个相对比较新的系 ...

  9. 简述在php中 = 、==、 === 的区别(简述在php中 等于 、双等于、 三等于 的区别)

    = 是赋值:就是说给一个变量赋值 == 是轻量级的比较运算,只看值不看类型 === 是重量级的比较运算,既看值,也看类型,要绝对相等才会为true

  10. V4L2学习(二)结构介绍

    v4l2_device v4l2_device在v4l2框架中充当所有v4l2_subdev的父设备,管理着注册在其下的子设备.以下是v4l2_device结构体原型(去掉了无关的成员): struc ...