回転した要素を右端に配置する方法

Question

絶対要素（この場合はイメージ）をコンテナの右端に揃えようとしています。

要素が回転していないが、変換が含まれている場合は、leftプロパティが正しく計算されません。

多分私は何かが不足しているかもしれませんが、私が今使っている解決策は、幅を取得してからコンテナの幅から引き算するのにgetBoundingClientRect()です。

ここには私がやっていることを示すJSFiddleがあります。

Answer 1

getBoundingClientRect良いアプローチですが、問題を左に設定すると、計算された回転なしで配置されます。設定した順番は、回転divの現在の位置に関係なく、回転がCSSに対して適用されたという事実は変わりません。したがって、getBoundingClientRectを使用して寸法を計算すると、回転を考慮に入れているので、それを考慮しないCSSで使用します。

適切な座標を取得する簡単な方法の1つは、回転前と後の差を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の違いは、回転によってどれだけの幅が失われるかを示します。この計算では、変換元が重要であることに注意してください。たとえば、回転を中心にすると、xの差を得るために幅の差を2で除算する必要がありますが、別の原点は別のものになります。このよう

：

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