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

您需要设置transform-origin。

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

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