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

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 来完成。两者之间的差异将告诉您旋转后损失了多少宽度。请注意，对于此计算，变换原点很重要。例如，对于居中旋转，您需要 divide 宽度差乘以 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>

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

How to position rotated element to the right edge

javascript

css

jquery

css-transforms