css缩放（-webkit-transform）div，它是jquery ui的子级，可拖动移动与拖动期间的光标不同答案

【问题标题】：css scaled (-webkit-transform) div and it's child with jquery ui draggable moves not same as cursor during draggingcss缩放（-webkit-transform）div，它是jquery ui的子级，可拖动移动与拖动期间的光标不同
【发布时间】：2012-07-14 07:06:22
【问题描述】：

我有一扇窗户，里面有一个孩子。孩子应该在窗户内移动。使用 css 转换 (-webkit-transform) 缩放窗口。我尝试过这样的事情：

html
<div class="window">
    <div class="rect"></div>
</div>

css
.window
{
    width: 640px;
    height: 480px;
    background: gray;
    position: absolute;
    -webkit-transform: translate(-25%, -25%) scale(0.5);
}

.rect
{
    width: 60px;
    height: 40px;
    background: red;
}

js
$(function() {
    $('.rect').draggable({
        containment: 'parent'
    });
});

我已经在这里发布了 - http://jsfiddle.net/bLKQj/12/ 孩子的移动速度比光标慢。如果缩放将> 1，它将移动得更快。如何解决？

PS：在变换中translate(-25%, -25%) 是用于固定左上角的缩放。

【问题讨论】：

jQuery Drag/Resize with CSS Transform Scale的可能重复
要修改变换的中心，最好使用变换原点而不是平移：-webkit-transform-origin: 0; /* will transform from the top left corner */。

标签： jquery css draggable scale css-transforms

【解决方案1】：

我会说你为什么需要使用 CSS 转换？您应该尽可能避免使用它们，因为它们没有得到很好的支持，并且它们会产生这样的意外后果。你能指定不同的高度和宽度吗？

【讨论】：