使用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

Answer 2

添加变换原点以控制旋转的原点。

transform-origin: 0 0;

http://jsfiddle.net/ges7L/4/