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 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>

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

2 个答案: