移动端中js处理图形变形

一、移动端中图形变形处理js格式

1、旋转

oDiv.style.WebkitTransform=oDiv.style.transform="rotate(30deg)";

2、斜切（默认x轴）

oDiv.style.WebkitTransform=oDiv.style.transform="skew(30deg)";

3、缩放

oDiv.style.WebkitTransform=oDiv.style.transform="scale(0.1)";

4、平移

oDiv.style.WebkitTransform=oDiv.style.transform="translateX(100px)";

二、多个变形之间用空格隔开，先写的后执行，不同的执行顺序，变形结果不同。

例1：下句中，先执行缩放，后执行平移。

oDiv.style.WebkitTransform=oDiv.style.transform="translateX(100px)  scale(0.5)";

例2：下句中，先执行平移，后执行缩放。

oDiv.style.WebkitTransform=oDiv.style.transform="scale(0.5)  translateX(100px)";

三、移动端推荐用translate改变元素位置。

移动端使用left和top值改变元素位置会引起回流。性能差，可能很卡。
用translate改变元素位置性能更好。