css3 旋转和缩放问题

[ffx0s]

如图所示:没有旋转的时候拖拽四个控点进行缩放是正确的，但是旋转之后，再进行缩放，缩放的方向就不对了。求解决这个问题的思路。缩放我是改变left，top值做的、旋转是用CSS3的matrix做的，还有就是旋转之后，四个角的cursor也不对了


[zoverdoser]

transform-origin: center;?

[bsbgong]

就是楼上说的

[adspe]

transform-origin:50% 50%;

[ffx0s]

@zoverdoser
@bsbgong
就像PS里的缩放和旋转一样，假如旋转了45度角后，再点击右下角的控点进行缩放，此时是以右下角正对角的控点为原点进行缩放的。transform-origin: center这个应该不行吧。感觉用这个会更复杂。

[bsbgong]

@ffx0s
根据你的问题描述，是元素执行变换时的原点问题
那就是使用transform-origin这个属性
具体设置的话，根据你的设计，是保存了四个角的坐标并绑定了拖拽事件的
那么就在事件中设置元素的属性：
transform: scale
transform-origin: 对角点的坐标

[ffx0s]

@bsbgong http://jsfiddle.net/fabricjs/6ydPq/ 我想要的效果是这样的，当然他这个是用canvas做的。我现在缩放改变的是width，height，left，和top。没有用scale。实际效果和这个网站一样的： http://www.polyvore.com/cgi/app

[bsbgong]

@ffx0s
http://jsfiddle.net/fabricjs/6ydPq/ 我看这个里面也是设置的origin
基于你现有的left/top的方案，我觉得不可行。因为只靠这一类CSS属性的话，你无法控制浏览器绘制一个元素的原点，没有这个接口。
建议换用transform。
1. transform在动画性能上更高
2. origin属性可以简单地解决你的难点

[ffx0s]

@bsbgong http://www.webfed.cn/static/webapp/static/images/3.gif 用scale缩放的话，控点也会变小。