transform总结

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 xvar y = matrix[13] || matrix[5]; //translate yif(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

转载于:https://www.cnblogs.com/mengff/p/7520609.html

transform总结相关推荐

css3之transition、transform、animation比较
css3动画多少都有些了解,但是对于transition.transform.animation这几个属性一直是比较模糊的,所以啊,这里做一个总结,也希望大家都可以对此有一个更好地理解. 其实, ...
基于css3 transform实现散乱的照片排列
分享一款基于css3 transform实现散乱的照片排列.这是一款简单零散的css3相册排列特效下载.效果图如下: 在线预览源码下载实现的代码. html代码: <div class ...
OpenCV中的尺度不变特征变换（SIFT Scale-Invariant Feature Transform）
OpenCV中的尺度不变特征变换(SIFT Scale-Invariant Feature Transform) 1. 效果图 2. 原理 2.1 步骤 2.2 opencv实现方法 2.3 SIFT ...
FT(Fourier Transform)在滤波上的应用
数学真的是一个神奇的科学,美妙之处无法言语形容. 傅里叶变换的推导见博客: 对于非周期的函数就是周期T趋于0,将一般非周期的函数写作傅里叶级数的形式: 其中:就是FT(Fourier Transfor ...
放大旋转 css3,CSS3详解：transform 的旋转、旋转放大、放大、移动
CSS3 transform是什么? transform的含义是:改变,使-变形:转换 CSS3 transform都有哪些常用属性? transform的属性包括:rotate() / skew() ...
std::transform使用
std::transform在指定的范围内应用于给定的操作,并将结果存储在指定的另一个范围内. 以下是std::transform的两个声明,一个是对应于一元操作,一个是对应于二元操作 templat ...
C++ transform for_each
#include<iostream> #include<vector> #include <list> #include <algorithm> #in ...
三棱锥四面体html css,CSS transform属性实现旋转的四面体
原创声明本文系作者辛苦码字所得,欢迎分享和转载,但请在明显位置注明作者的如下信息: 笔名:来碗鸡蛋面简书主页:https://www.jianshu.com/u/4876275b5a73 邮箱:j ...
TF (transform) in ROS
总结: tf(transform) package有两种broadcast方式 1.写在程序里,broadcast 2.另一种方式,当坐标变换为不随时间而改变的变换时,可以在launch文件中l ...

transform总结

transform总结相关推荐

最新文章

热门文章