Question

在侧边栏中，我想将旋转的元素堆叠在另一个元素的顶部。这两个元素之间的距离需要可靠地关闭 - 因此，与窗口或屏幕尺寸无关。

这是我的HTML代码：

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

正如您在fiddle中看到的那样，.rotate类与.no-rotate类重叠。这是由于旋转 - .rotate类旋转前的假设框完全堆叠在.no-rotate类上。轮换后，这不再是真的。除此之外，我无法理解如何将旋转的跨距与该框的底部对齐。

我知道我可以通过将translateY()放入transform语句来更改两个元素之间的距离。但是，这并没有给我两个元素之间的固定空间关系 - 与窗口或屏幕大小无关。

这里有一些我想念的简单解决方案吗？或者我是否需要完全找到不同的方法？

Answer 1

使用transform-origin。该属性允许您影响旋转对象的点。

我能够达到的最接近的是：

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>

如何将旋转的元素与未旋转的元素对齐

1 个答案: