CSS3:垂直对齐的多个旋转div

Question

我有三个或更多div,我想旋转并垂直对齐它们.我试过但我找不到解决方案.

CSS:

.rotation {
  float: left;
  clear: both;
  width:100px;
}
.rotation .container {
  float: left;
  clear: both;
}
.rotation .rotate {
  float: left;
  margin-top: 20px;
  -ms-transform: rotate(90deg);
  /*IE 9*/
  -webkit-transform: rotate(90deg);
  /*Chrome, Safari, Opera*/
  transform: rotate(90deg);
  transform-origin: 50% 50% 0;
  background: #3c8d37;
  color: #fff;
  font-family:arial;
}

HTML:

<div class="rotation">
  <div class="container">
    <div class="rotate">First Text</div>
  </div>
  <div class="container">
    <div class="rotate">Long Text Long Text</div>
  </div>
  <div class="container">
    <div class="rotate">Very Long Text Very Long Text</div>
  </div>
</div>

我正在尝试做这样的事情:

文本长度可能因文化而异,我希望保持所有div对齐.那可能吗？我感谢任何帮助.

Answer 1

你是在思考问题.

不要旋转单个项目...像普通水平div一样构建它,然后旋转父项.它还简化了标记

HTML

<div class="rotation">
    <div class="rotate">First Text</div>
    <div class="rotate">Long Text Long Text</div>
    <div class="rotate">Very Long Text Very Long Text</div>
</div>

CSS

.rotation {
    display: inline-block;
    transform: rotate(90deg);
    transform-origin: bottom left;
}

.rotation .rotate {
    background: #3c8d37;
    color: #fff;
    font-family:arial;
    display: inline-block;
    padding:5px;

}

JSfiddle演示