首页 > 其他 > 详细

transform顺序浅谈

时间:2017-12-12 00:50:41      阅读:209      评论:0      收藏:0      [点我收藏+]

有用过transform的小伙伴们可能都会遇到一些问题,发现transform得到的结果往往不是我们所想的

例如scale(2,1) rotate(30deg) ,我们预想的结果是一个先放大的元素,然后旋转30度,结果应该是一个没有变形的元素,但是显示很残酷:

理想:

技术分享图片----------------变成--------------------》》》技术分享图片


 

实际:

技术分享图片----------------变成--------------------》》》技术分享图片

实际上变形了,这是为什么呢?其实transform实际都是matrix(矩阵)的计算,是右乘的,所以变化的顺序是从后往前的,

因此理想的写法是:

transform: scale(2,1) rotate(30deg);

实际上的写法是:

transform: rotate(30deg) scale(2,1);

canvas和svg,还有其他各种框架里面的transform其实都是从后到前的顺序来变换的

transform顺序浅谈

原文:http://www.cnblogs.com/amiezhang/p/8025653.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!