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 Demo

Answer 2

有可能。诀窍是将旋转放在div .rotation上。我还更改了transform-origin，以便旋转从左下角开始，而不是从中间开始。

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

请参阅fiddle了解结果。这是你想要的吗？