html - 如何将旋转的元素定位在右侧的中间？

Question

我需要在正确站点的页面中间放置一个旋转元素。居中在没有旋转的情况下工作正常，但随着旋转，它把一切都搞砸了，因为我需要旋转的元素的宽度没有定义。

#text-right {
	right: 0;
	-moz-transform: rotate(90deg); /* Firefox 3.6 Firefox 4 */
	-webkit-transform: rotate(90deg); /* Safari */
	-o-transform: rotate(90deg); /* Opera */
	-ms-transform: rotate(90deg); /* IE9 */
	transform: rotate(90deg); /* W3C */
  }

.side-text {
	position: fixed;
	top: 50%;

	-webkit-transform: translateY(-50%);
}

<div id="text-right" class="side-text">
  <a href="some link" class="navigation" draggable="false">
    <h1>Grafik im Raum</h1>
  </a>
</div>

如何将它居中放置在正确的网站上？

Answer 1

您必须设置一个合适的 transform-origin 点(我使用的是右上角)，并根据该点相应地调整翻译。

记住 translateX 仍然与元素的宽度相关，即使它已旋转也是如此。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#text-right {
  right: 0;
  position: fixed;
  top: 50%;
}
.side-text {
  background: lightblue;
  transform-origin: top right;
  transform: rotate(90deg) translateX(50%);
}

<div id="text-right" class="side-text">
  <a href="some link" class="navigation" draggable="false">
    <h1>Grafik im Raum</h1>
  </a>
</div>