回転した要素を回転していない要素に揃える方法

Question

サイドバーでは、回転した要素を別の要素の上に重ねる必要があります。これらの2つの要素の間の距離は、ウィンドウや画面のサイズに関係なく、確実に近い必要があります。ここで

が私のHTMLコードです：あなたがfiddleで見ることができるように

.sidebar { 
 
     width: 100px; 
 
     height: 100%; 
 
     position: fixed; 
 
     top: 0; 
 
     right: 0; 
 
     border-left: 2px solid black; 
 
    } 
 
    
 
    .sidebar div.bottom { 
 
     text-align: center; 
 
     width: 100%; 
 
     position: absolute; 
 
     bottom: 0px; 
 
     display: flex; 
 
     flex-direction: column-reverse; 
 
    } 
 
    
 
    .sidebar div.rotate { 
 
     width: 100%; 
 
     white-space: pre; 
 
     line-height: 1; 
 
     transform: rotate(-90deg); 
 
     text-align: left; 
 
     border: 1px dashed red; 
 
    } 
 
    
 
    .sidebar div.no-rotate { 
 
     border: 1px dotted orange; 
 
    }

<div class="sidebar"> 
 
     <div class="bottom"> 
 
     <div>something something</div> 
 
     <div class="no-rotate">^^^</div> 
 
     <div class="rotate"> 
 
      <span>short</span> 
 
      <span>much longer</span> 
 
      <span>even longer than the others</span> 
 
     </div> 
 
     </div> 
 
    </div>

、.rotateクラスが.no-rotateクラスが重なっています。これは回転によるものです。.rotate PRIOR TO ROTATIONの仮説ボックスは、正確に.no-rotateクラスに積み重ねられています。回転後、これはもはや真実ではありません。それ以上では、回転したスパンをどのようにボックスの底に合わせるかはわかりません。

私は、translateY()をtransformステートメントに入れて、2つの要素の間隔を変更できることを知っています。しかし、これは2つの要素の間の固定された空間的関係を私に与えません - ウィンドウや画面のサイズに依存しません。

私はここにいくつかの簡単な解決策がありますか？あるいは、私は別のアプローチを見つける必要がありますか？

Answer 1

transform-originを使用してください。このプロパティを使用すると、オブジェクトが回転するポイントに影響を与えることができます。 `に、移動Y（-25px）回転（-90deg）：

transform-origin: 40% 40%; 

.sidebar { 
 
     width: 100px; 
 
     height: 100%; 
 
     position: fixed; 
 
     top: 0; 
 
     right: 0; 
 
     border-left: 2px solid black; 
 
    } 
 
    
 
    .sidebar div.bottom { 
 
     text-align: center; 
 
     width: 100%; 
 
     position: absolute; 
 
     bottom: 0px; 
 
     display: flex; 
 
     flex-direction: column-reverse; 
 
    } 
 
    
 
    .sidebar div.rotate { 
 
     width: 100%; 
 
     white-space: pre; 
 
     line-height: 1; 
 
     transform: rotate(-90deg); 
 
     transform-origin: 40% 40%; 
 
     text-align: left; 
 
     border: 1px dashed red; 
 
    } 
 
    
 
    .sidebar div.no-rotate { 
 
     border: 1px dotted orange; 
 
    }

<div class="sidebar"> 
 
     <div class="bottom"> 
 
     <div>something something</div> 
 
     <div class="no-rotate">^^^</div> 
 
     <div class="rotate"> 
 
      <span>short</span> 
 
      <span>much longer</span> 
 
      <span>even longer than the others</span> 
 
     </div> 
 
     </div> 
 
    </div>

あなたが使用することができます