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

Question

我正在尝试将一个绝对元素(在本例中为图像)与容器的右边缘对齐。

如果元素不旋转，则它会起作用，但当涉及变换时，左属性的计算不正确。

也许我遗漏了一些东西，但我现在使用的解决方案是getBoundingClientRect()来获得宽度，然后从容器宽度中减去它。

这里有一个JSFiddle演示了我正在做的事情。

Answer 1

getBoundingClientRect是一种很好的方法，问题是当您将css向左设置时，它会在不计算旋转的情况下对其进行定位。设置它的顺序不会改变旋转是相对于css应用的，而不是相对于旋转的div的当前位置。因此，当您使用getBoundingClientRect计算维度时，您考虑了旋转，然后在不考虑旋转的css上使用它。

获得正确坐标的一个简单方法是计算旋转前和旋转后的x差，并相应地向左调整。prevDimension.x - dimension.x将为您提供旋转所创建的x差，从而允许您调整newLeft。

像这样：

$('#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/

另一种方法是基于未旋转元件和旋转元件之间的宽度差来计算x差。这可以使用offsetWidth(不考虑旋转)和getBoundingClientRect来完成。2之间的差异将告诉您旋转时损失了多少宽度。请注意，对于此计算，变换原点很重要。例如，对于居中旋转，需要将宽度差除以2才能得到x差，但对于另一个原点，则会是其他值。

像这样：

$('#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

这里有一个JSFiddle。

旋转图像时，边界矩形将保留在旋转的位置，而不是变换后的坐标。

我添加了一个"bcr"<div>元素，然后将其与绑定客户端矩形相匹配。

在旋转之后，我们可以将图像移动到位(477是bounds的绝对右边)。

如果你反复点击按钮，似乎会有一个小问题，但我想这就是CSS转换的魔力！

$('#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>