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

Question

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

如果元素没有旋转，它可以工作，但是当涉及到变换时，left属性计算不正确。

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

这是一个JSFiddle，它展示了我在做什么。

Answer 1

getBoundingClientRect 是一个很好的方法，问题是当你将css设置为left时，它会在没有计算旋转的情况下定位它。您设置它的顺序不会改变旋转相对于 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 here。

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

我添加了一个“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>