如何将旋转的元素放置在右侧的中间? [英] How to position a rotated element in the middle on the right?

问题描述

我需要将旋转的元素放置在右侧站点页面的中间.居中无需旋转即可很好地工作，但随着旋转，它将使所有内容弄乱，因为我需要旋转的元素的宽度未定义.

I need to position a rotated element in the middle of the page on the right site. The centering works fine without the rotation but with the rotation it messes everything up because the width of the element I need to rotate is not defined.

#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>

如何将其居中放置在正确的位置?

How can I center it in the middle and on the right site?

推荐答案

您必须设置一个合适的 transform-origin 点(我在右上角使用)，并在此基础上相应地调整翻译.

You have to set a suitable transform-origin point (I used top right) and based on that adjust the translation accordingly.

记住 translateX 仍然与元素的宽度有关，即使它已旋转.

Remember translateX still relates to the width of the element even though it's rotated.

* {
  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>

这篇关于如何将旋转的元素放置在右侧的中间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！