一、移动端中图形变形处理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改变元素位置性能更好。