文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将旋转的元素与未旋转的元素对齐

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

Stack Overflow用户

提问于 2016-12-16 19:27:28

回答 1查看 70关注 0票数 0

在侧边栏中，我希望将一个旋转的元素堆叠在另一个元素的顶部。这两个元素之间的距离需要可靠地接近-因此，独立于窗口或屏幕大小。

下面是我的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语句来更改两个元素之间的距离。然而，这并不能给我提供两个元素之间的固定空间关系-独立于窗口或屏幕大小。

这里有没有我遗漏的简单的解决方案？或者我需要找到一种完全不同的方法？

html

css

rotation

回答 1

Stack Overflow用户

发布于 2016-12-16 20:39:46

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

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41183395

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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