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>

DEMO：https://jsfiddle.net/kz2gb0ox/

Answer 3

你的css选择器都匹配相同的元素，这就是为什么只应用了一个变换（应用了rotate（90deg），translateY（-50％）isn＆t; t）。但你可以链变换！因此，您的问题的解决方案将如下所示：

＆＃13;

#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);
}

＆＃13;

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

＆＃13;

如何将旋转元素放在右边的中间？

3 个答案: