如何将旋转的元素定位在右边的中间位置

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>

Answer 2

我首先将文本父div居中，使用text-align和vertical-align将文本居中，并将文本旋转到里面。

#text-right {
    height: 100px;
    width: 400px;
    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: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -200px;
    text-align: center;
    vertical-align: center;
}    
<div id="text-right" class="side-text">
  <a href="some link" class="navigation" draggable="false">
    <h1>Grafik im Raum</h1>
  </a>
</div>

演示:https://jsfiddle.net/kz2gb0ox/

Answer 3

你的css选择器都匹配相同的元素，这就是为什么只有一个变换被应用(旋转(90度)被应用，平移(-50%)没有)。但是你可以链式变换!所以你的问题的解决方案看起来像这样:

#text-right {
	right: 0;
  }
.side-text {
	position: fixed;
	top: 50%;
	-moz-transform: translateY(-50%) rotate(90deg);
	-ms-transform: translateY(-50%) rotate(90deg);
	-o-transform: translateY(-50%) rotate(90deg);
	-webkit-transform: translateY(-50%) rotate(90deg);
	transform: translateY(-50%) rotate(90deg);
}

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