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. javaweb基础(32)_jdbc学习入门

    一.JDBC相关概念介绍 1.1.数据库驱动 这里的驱动的概念和平时听到的那种驱动的概念是一样的,比如平时购买的声卡,网卡直接插到计算机上面是不能用的,必须要安装相应的驱动程序之后才能够使用声卡和网卡 ...

  2. vmware:使用.zip文件在vmware中安装操作系统

    问题描述: 之前在vmware中安装系统时,全部都是加载的.iso文件来实现.后面同事给了一个zip包,解压后是".vmdk"等一系列具体的文件.一时间不知道怎么安装系统了,搜网页 ...

  3. iOS中View的创建过程

    ios应用中控制器view的创建方式有三种:storyboard.xib和代码,当APP启动后View的具体加载过程如图(苹果官方): 假设我使用的是WYSViewController控制器 应用启动 ...

  4. Xcode Warning: “no rule to process file

    警告⚠️: warning: no rule to process file '/Users/Kingdev/Desktop/Git/finance_iOS/finance/Library/MBpro ...

  5. select函数实例代码

    select函数简解: selct 称之为多路复用IO,使用它可以让程序阻塞在select上,而非实际IO函数上. int select(int nfds, fd_set *readfds, fd_s ...

  6. vue-cli的build的文件夹下没有dev-server.js文件,怎么配置mock数据

    因为最新版本的vue-cli已经放弃dev-server.js,只需在webpack.dev.conf.js配置就行 新版webpack.dev.conf.js配置如下: 在const portfin ...

  7. Fakeapp 入门教程(1):安装篇!

    在众多AI换脸软件中Fakeapp是流传最广,操作最简单的一款,当然他同样也是源于Deepfakes. 这款软件在设计上确实是花了一些心事,只要稍加点拨,哪怕是再小白的人也能学会.下面我就做一个入门教 ...

  8. DFS:BZOJ1085-骑士精神

    题目: 1085: [SCOI2005]骑士精神 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1461  Solved: 796 [Submit][ ...

  9. HDU_6194 后缀数组+RMQ

    好绝望的..想了五个多小时,最后还是没A...赛后看了下后缀数组瞬间就有了思路...不过因为太菜,想了将近两个小时才吧这个题干掉. 首先,应当认为,后缀数组的定义是,某字符串S的所有后缀按照字典序有小 ...

  10. Java 关键字volatile 与 synchronized 作用与区别

     1,volatile 它所修饰的变量不保留拷贝,直接访问主内存中的.    在Java内存模型中,有main memory,每个线程也有自己的memory (例如寄存器).为了性能,一个线程会在自己 ...