在条形图的上下文中用于文本旋转的CSS3变换

我知道在这里通过CSS旋转文本有很多问题，并且我试图将他们的解决方案应用于我的情况，但是我一直无法获取我的情况工作。在条形图的上下文中用于文本旋转的CSS3变换

我的目标是创建一个条形图，但在某些情况下数据点丢失。设计师会喜欢一种效果，即将文本逆时针旋转90度，形成一列代替缺失的栏。

HTML：

 <li><div class="bar-missing">Results upcoming</div> 
      <span>Aug &rsquo;15</span></li>

CSS：

 .trend-graph #bars li .bar-missing { 
     text-transform: uppercase; 
     text-align: center; 
     color: #00AEEF; 
     /* Safari */ 
     -webkit-transform: rotate(-90deg); 
     /* Firefox */ 
     -moz-transform: rotate(-90deg); 
     /* IE */ 
     -ms-transform: rotate(-90deg); 
     /* Opera */ 
     -o-transform: rotate(-90deg); 
     /* Internet Explorer */ 
     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
}

利用该代码的“列”的文本换行分成两行，被定位有点过头向右（应高于中心x轴标签），并且在x轴上方太高，如在此示例中所示：

https://jsfiddle.net/wvfy6zje/

如果我更改宽度div.bar-missing，文本在一行上，但容器li变得非常宽。在集装箱li上试图限制孩子div.bar-missing没有让事情变得更好。在StackOverflow上阅读类似的问题让我绝望地得到任何涉及高度和宽度的解决方案，所以我也尝试过使用绝对定位和负边距来移动事物，但没有取得太大的成功。

希望有人能帮助...！提前致谢！

来源

2015-04-13 TAH

添加另一个标准'变换：旋转（-90deg）;'你的CSS ... – Xufox

新增，但问题仍然存在。不过谢谢！ – TAH

这是怎么回事？ https://jsfiddle.net/wvfy6zje/11/

我基本上是从你的li.bar复制的布局，以你的li.bar-blank并添加white-space:nowrap防止自动换行：

.trend-graph #amh-bars li .bar-blank { 
    text-transform: uppercase; 
    text-align: center; 
    color: #00AEEF; 
    white-space: nowrap; /* ADDED */ 
    width: 27px;   /* ADDED */ 
    margin-left: 15px; /* ADDED */ 
    position:absolute; /* ADDED */ 
    bottom:10px;   /* ADDED */ 
    transform: rotate(-90deg); 
}

来源

2015-04-13 02:08:41 sebnukem

哇，nowrap在这种情况下从来没有发生过。非常感谢！如果我可能会要求跟进 - 设计师的模型将文本垂直居中在列中（而不是在底部对齐）。我已经玩弄了一下你的解决方案，看看我能否得到这种效果，但我回到了以前一样的混乱状态。你在这里也有什么想法吗？再次感谢！ – TAH

在条形图的上下文中用于文本旋转的CSS3变换

回答

相关问题