javascript - 拖动和调整 CSS 变换元素的大小

Question

例如，如果我们设置一个 -vendor-transform: rotate(40deg)矩形的 css 属性 <div> ，所有突然的拖动和调整大小变得非常奇怪和有缺陷。

这是一个简单的 jQueryUI 示例:http://jsfiddle.net/Ja4dY/1/

您会注意到，如果您在变形时拖动或调整矩形的大小，它会向上或向下跳动，并且光标不会停留在正确的位置。在我的真实代码中，我使用自定义代码来调整大小和拖动，但是我遇到了同样的问题。

嗯，当然“问题”是元素的方向会改变。所以左边可以是右边，顶部可以是底部，中间有一些东西，Javascript 代码仍然处理每个方向，因为它不会转换。

那么，问题是:我们如何补偿变形/旋转 元素？

也欢迎任何好的资源/书籍/博客。

Answer 1

您可以使用 getComputedStyle() 获取应用于元素的当前变换矩阵。您可以使用它来将当前鼠标位置转换为其在转换空间中的位置，并查看单击/拖动事件是否在元素边界和/或 Angular 内。好的资源:

http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/

http://www.eleqtriq.com/2010/05/css-3d-matrix-transformations/

顺便说一句，正如您所经历的，这对代码来说并非易事。我们必须为 Sencha Animator 做这件事，这是一头野兽。