CSS Transform with Element Resizing

.chip {    display: inline-block;    position: relative;    color: #747474;    line-height: 32px;    padding: 0 12px;    background-color: #e4e4e4;    border-radius: 5px;    vertical-align:middle;}
.chip > i {  display:inline-block;  max-width:0em;  opacity:0;  transition:max-width .5s,opacity .5s;  overflow:hidden;  vertical-align:middle;}
.chip:hover > i{  max-width:2em;  opacity:1;}

<link href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" rel="stylesheet"/><div class="chip">    Animation    <i class="fa fa-times"></i></div>

HTML, CSS: Resizing the IMG with transitioning while resizing

There is no need to define the same transition property for the image and the hover pseudoclass. If you don't define transition in .logo:hover, it will take the previously set value of half a second.

The problem here is that you must specify an initial width and height for the image in order to have it resize smoothly.

Dragging & Resizing CSS Transformed Elements

You can get the current transformation matrix that is applied to an element by using getComputedStyle(). You can use this to transform the current mouse position to its position in transformed space and see whether the click/drag events are within the element boundary and/or corners. Good resources for this:

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/

BTW, as you're experiencing, this is non-trivial to code. We had to do it for Sencha Animator, and it was a beast.

jQuery Drag/Resize with CSS Transform Scale

It's been a while since this question was asked. I have found (actually created) an answer. All it requires is setting callback handlers. No editing jquery-ui needed!

Note: zoomScale in this example is a global variable and the transform is set using animate (aided by jquery.transform.js) like so:

target.animate({
    transform: 'scale(' + zoomScale + ')'
});

Take a look at this:

transform scale() fix for resizable:

$(this).resizable({
    minWidth: -(contentElem.width()) * 10,  // these need to be large and negative
    minHeight: -(contentElem.height()) * 10, // so we can shrink our resizable while scaled
    resize: function(event, ui) {

        var changeWidth = ui.size.width - ui.originalSize.width; // find change in width
        var newWidth = ui.originalSize.width + changeWidth / zoomScale; // adjust new width by our zoomScale

        var changeHeight = ui.size.height - ui.originalSize.height; // find change in height
        var newHeight = ui.originalSize.height + changeHeight / zoomScale; // adjust new height by our zoomScale

        ui.size.width = newWidth;
        ui.size.height = newHeight;

    }
});

transform scale() fix for draggable:

$(this).draggable({
    handle: '.drag-handle',
    start: function(event, ui) {
        ui.position.left = 0;
        ui.position.top = 0;
    },
    drag: function(event, ui) {

        var changeLeft = ui.position.left - ui.originalPosition.left; // find change in left
        var newLeft = ui.originalPosition.left + changeLeft / (( zoomScale)); // adjust new left by our zoomScale

        var changeTop = ui.position.top - ui.originalPosition.top; // find change in top
        var newTop = ui.originalPosition.top + changeTop / zoomScale; // adjust new top by our zoomScale

        ui.position.left = newLeft;
        ui.position.top = newTop;

    }
});

Let me know if you find any problems or further improvements on this. :)

Reference: jQuery-UI resizable/draggable with transform: scale() set

How do I calculate top and left when resizing translated and rotated elements

I'll post an answer here in case anyone else hits this problem.

After locating this post: https://www.py4u.net/discuss/914662 the math is a little more clear.

It first grabs the location of the object along with the rotation, then for the new position it gets the location and then calculates the diff. Here's my functionalized version:

function calcNewPos(curr_x, curr_y, curr_w, curr_h, new_w, new_h, angle) {
    // convert angle to radians
    angle = angle * Math.PI / 180

    //initial position.
    let pos = {left: curr_x, top: curr_y};
    
    //Get position after rotation with original size
    let x = -curr_width/2;
    let y = curr_height/2;
    let new_x = y * Math.sin(angle) + x * Math.cos(angle);
    let new_y = y * Math.cos(angle) - x * Math.sin(angle);
    let p1 = {left: new_x - x, top: new_y - y};

    //Get position after rotation with new size
    x = -new_w/2;
    y = new_h/2;
    new_x = y * Math.sin(angle) + x * Math.cos(angle);
    new_y = y * Math.cos(angle) - x * Math.sin(angle);
    let p2 = {left: new_x - x, top: new_y - y};

    //Get the difference between the two positions
    let offset = {left: p2.left - p1.left, top: p2.top - p1.top};

    //Calculate the correction
    return {left: pos.left - offset.left, top: pos.top + offset.top};
}

I'm sure the math could be reduced in size, but this example lays it out there in an easy to understand way.

---

Related Topics