如何将旋转的元素定位到右边缘

Question

I am trying to align an absolute element (image in this case) to the right edge of the container.

It works if the element is not rotated, but when a transformation is involved, the left property is not calculated correctly.

Maybe I am missing something, but the solution I am using right now is getBoundingClientRect() to get the width and then subtract it from the container width.

Here is a JSFiddle that demonstrate what I am doing.

Answer 1

getBoundingClientRect is a good approach, the problem is that when you set css left, it positions it without the rotation calculated. The order in which you set it doesn't change the fact the the rotation is applied in relation to the css, not in relation to the current position of the rotated div. So when you calculate dimensions using getBoundingClientRect you're taking into account the rotation, then you use it on a css that doesn't take it into account.

One easy way to get proper coordinates, would be to calculate the x difference between before rotation and after and adjust you left accordingly. You'll have prevDimension.x - dimension.x giving you the difference in x that the rotation is creating, which allows you to adjust newLeft .

Like this:

$('#rotate-align').click(function () {
                var prevDimensions = $('.element')[0].getBoundingClientRect();
        $('.element').css('transform', 'rotate(0.99923rad)');
        var dimensions = $('.element')[0].getBoundingClientRect();
        var newLeft = $('#bounds').width() - dimensions.width - dimensions.x + prevDimensions.x;
        $('.element').css('left', newLeft);
});

http://jsfiddle.net/jgcynwmp/3/

Another approach would be to calculate the x difference based on the width difference between the non rotated element and the rotated element. This can be done using offsetWidth (which doesn't take the rotation into account) and the getBoundingClientRect . The difference between the 2 will tell you how much width is lost with the rotation. Note that for this calculation, the transform origin is important. For example, with a centered rotation, you'll need to divide by 2 the width difference to get the x difference, but with another origin it would be something else.

Like this:

$('#rotate-align').click(function () {
        $('.element').css('transform', 'rotate(0.99923rad)');
        var dimensions = $('.element')[0].getBoundingClientRect();
        var newLeft = $('#bounds').width() - $('.element')[0].offsetWidth + (($('.element')[0].offsetWidth - dimensions.width) / 2);
        $('.element').css('left', newLeft);
});

http://jsfiddle.net/jgcynwmp/4/

Answer 2

There is a JSFiddle here .

When the image is rotated, the bounding rectangle remains in the place of the rotation, instead of being to the transformed coordinates.

I added a 'bcr' <div> element which then is matched to the bounding client rectangle.

After the rotation we can move the image into place (477 is the absolute right of bounds ).

There appears to be a small problem if you repeatedly click the button, but I guess that's the magic of CSS transforms!

 $('#align').click(function () { var newLeft = $('#bounds').width() - $('.element').outerWidth(); $('.element').css('left', newLeft); }); $('#rotate-align').click(function () { $('.element').css('transform', 'rotate(0.69923rad)'); var dimensions = $('.element')[0].getBoundingClientRect(); $('.element').css('left',477-dimensions.width-dimensions.left); $('#bcr').css('left',dimensions.left); $('#bcr').css('top',dimensions.top); $('#bcr').css('width',dimensions.width); $('#bcr').css('height',dimensions.height); }); 

 #bounds { width:427px; height:354px; left:50px; top:38px; border: 1px solid red; position: absolute; } #bcr { width:327px; height:254px; left:150px; top:138px; border: 1px solid green; position: absolute; } .element { top: 100px; z-index: 102; line-height: 82px; width: 312px; height: 82px; #transform: rotate(0.99923rad); left: 0; position:absolute; border: 1px solid green; } .element-img { width: 100%!important; height: 100%!important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="bounds"> <div class="element"> <img class="element-img" src="https://www.google.com/logos/doodles/2014/2014-winter-olympics-5710368030588928-hp2x.jpg"> </div> </div> <input type="button" id="align" value="Align right" style="width:100%;" /> <input type="button" id="rotate-align" value="Rotate and align right" style="width:100%;" /> <div id="bcr"></div>