2

I have a window with a child inside. Child should be moving inside window. Window is scaled using css transform (-webkit-transform). I tried something like this:

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'
    });
});​

​ I've posted it here - http://jsfiddle.net/bLKQj/12/ The child moves slowly than cursor. If scaling will be >1 it will be moves faster. Howto fix it?

PS: In transform translate(-25%, -25%) is for make scaling with fixed top-left corner.

Rich Bradshaw
  • 71,795
  • 44
  • 182
  • 241
DmT021
  • 115
  • 2
  • 9
  • possible duplicate of [jQuery Drag/Resize with CSS Transform Scale](http://stackoverflow.com/questions/10212683/jquery-drag-resize-with-css-transform-scale) – Martijn Pieters Jul 15 '12 at 09:15
  • To modify the center of your transformation, preferably use the transform origin and not translate: `-webkit-transform-origin: 0; /* will transform from the top left corner */`. – Torsten Walter Jul 20 '12 at 10:34

1 Answers1

0

I would say why do you need to use a CSS transform? You should really avoid them whenever possible, because they're not well supported and they have unintended consequences like this. Can you just specify different height and width?

russtuck91
  • 575
  • 2
  • 4
  • 16