CSS转换旋转问题

Question

我们的团队正在ServiceNow的Service Portal中构建时间轴小部件，并且在尝试使时间轴响应时遇到了一些CSS问题。我们使用水平的Bootstrap进度条将时间线拼凑在一起。当屏幕尺寸减小时，我们希望水平进度条变为垂直。我们已经通过完成transform: rotate(-270deg)来完成此操作，但是它无法正确居中和缩放，并且大部分时间轴实际上不在屏幕上：

我们已经通过增加一些边距来解决这个问题，但正在尝试找出是否有更好的方法可以做到这一点：

#timeline-wrap{
  top:100px;
  position:relative;
}

@media screen and (max-width: 768px) {
  #timeline-wrap{
    margin-top: 35%;
    margin-left: 5%;
    margin-right: 5%;
    transform: rotate(-270deg);
  }
}

使用上述CSS，这是在较小的屏幕尺寸下的样子：

Answer 1

尝试一下：

#timeline-wrap{
        position:relative;
    }

    @media screen and (max-width: 768px) {
        #timeline-wrap{
            margin-top:50vh !important;
            margin-left:auto;
            margin-right:auto;
            transform: rotate(-270deg);
            width:70vh;
        }
    }

Demo here

Answer 2

我也有类似的情况。它是将“报告”列标题旋转270度。但是“ transform：rotate（270deg）”还不够。即使完成了270度的旋转，大部分名称部分也被截断了。

因此，我使用以下查询，它运行良好。

=“” + [v_Room_Typ_Inv_Type_Col_Header] +“”

这行得通。