html - CSS 右侧菜单

Question

我很难让右侧菜单与侧面正确对齐。

当我调整东西的宽度时，它会从侧面偏移。

CSS:

.tab {
  position: fixed;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  padding: 0;
  height: 20px;
  width: 80px;
  display: block;
  background-color: #111;
  color: #fed;
  -webkit-transform: rotate(-90.0deg);
  transform: rotate(-90.0deg);
  text-align: center;
}

HTML:

<div class="tab">MENU</div>

http://codepen.io/flemmingdjensen/pen/PZBbaG

Answer 1

您需要设置变换原点。

-webkit-transform: rotate(-90.0deg);
-webkit-transform-origin: bottom right;
transform: rotate(-90.0deg);
transform-origin: bottom right;

http://codepen.io/anon/pen/WrKRbM