CSS变换旋转问题答案

【问题标题】：CSS transform rotate issueCSS变换旋转问题
【发布时间】：2019-07-15 20:39:14
【问题描述】：

我们的团队正在 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，这就是它在较小的屏幕尺寸下的样子：

【问题讨论】：

你试过设置transform-origin吗？可能是transform-origin: 50% 50%; 中心
感谢@zgood，我什至不知道这是一个属性，但我试了一下，它没有改变任何东西。

标签： html css twitter-bootstrap progress-bar timeline

【解决方案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

【讨论】：

【解决方案2】：

我也有类似的情况。它将报告列标题旋转 270 度。但是“transform:rotate(270deg)”还不够。尽管旋转了 270 度，但大部分名称部分都被截断/修剪掉了。

所以我使用了下面的查询，它工作得很好。

=""+[v_Room_Typ_Inv_Type_Col_Header]+""

这行得通。

【讨论】：

您的答案如何适用于该问题？它有什么帮助？