css3之前，想要改变某个元素的位置，常用的方法是通过绝对定位改变其left或是top。而现在，由于css3新增加了transform属性，也可以通过改变translate来实现元素位置的变化。
一、translate的优点：
制作改变某个元素位置的动画效果，尤其是在移动端上，如果使用left或者top，会出现明显的卡顿，在配置较低的手机上甚至会产生重影的现象。而改用translate，元素的运动效果则会变得相对流畅许多，且不会产生重影。
因为用left或top时，在每一帧内，cpu （中央处理器） 都需要计算该元素的其他样式，特别是相对需要复杂计算的盒阴影，渐变，圆角等样式，最后都需要将这些样式应用到该元素内。从这个角度看，如果对于较为老旧的移动设备进行相对复杂的动画，那么效果肯定不理想。
而通过调用translate，会启动硬件加速，即在GPU层 (图形处理器) 对该元素进行渲染。这样，CPU就会相对解放出来进行其他的计算，GPU对样式的计算相对较快，且保证较大的帧率。我们可以通过2d和3d的transform来启用GPU计算。
二、获取transform中的值:
通过console.log可以看到，transform的值是一个矩阵：
其中第5个数字和第6个数字分别对应translateX和translateY。
获取这个值的方法有三种，例如我们要获取slider-bar这个元素的translateX值：
方法1--解析矩阵：
var style = window.getComputedStyle($('.slider-bar').get(0));
var matrix = new WebKitCSSMatrix(style.webkitTransform);
matrix.m41
WebKitCSSMatrix是专门用于操作矩阵的函数。而m41就是translateX值，其中4代表第4列，1代表第一行。所以如果你还想获取translateY的值，就用m42。
方法2--正则:
var sliderBarTransform = $('.slider-bar').css('transform');
var array=SliderBarTransform.match(/-?[\0-9\.]+/g);
array[4];
方法3--字符串分割：
用typeof查看矩阵的类型，结果为字符串(string)，所以也可以用字符串的方法split来分割。
var sliderBarTransform = $('.slider-bar').css('transform');
var array=SliderBarTransform.split('(')[1].split(')')[0].split(',');
array[4];
提示
当元素的display为none时，是获取不到transform的，设置如下样式
得到的结果为
所以在使用一些插件时，如果插件会将元素的display设置为none，那么就只能获取其他数值来替换transform的值。
网友评论