html - CSS变换旋转问题

Question

我们的团队正在 ServiceNow 的服务门户中构建一个时间轴小部件，并且在尝试使时间轴响应时遇到了一些 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