html - 使用 CSS 旋转

Question

我正在尝试旋转一个简单的导航，并将其定位到容器 div 的左侧。但是，我不确定旋转应该如何工作。由于某种原因，该 div 未与其父级重叠并且不在站点内。

我想要的结果如下所示，文本与容器的左侧对齐:

http://jsfiddle.net/ges7L/

.write-note-container {
    position: fixed;
    height: 400px;
    width: 800px;
    border: 2px solid #000;
    top: 50%;
    margin-top: -200px;
    right: 0;
    background-color: orange;
}

.write-note-container .nav {
    background-color: blue;
    height: 400px;
    border: 1px solid pink;
}

.write-note-container .nav .rotate {
      -ms-transform:rotate(90deg); /* IE 9 */
  -moz-transform:rotate(90deg); /* Firefox */
  -webkit-transform:rotate(90deg); /* Safari and Chrome */
  -o-transform:rotate(90deg); /* Opera */

background-color: red;
width: 400px;
text-align: left;
height: 100%;

}

Answer 1

您将需要 transform-origin属性设置为 0, 0

.write-note-container .nav .rotate {
    /* Other properties */
    background-color: red;
    transform-origin: 0 0;
}

Demo