CODEWITHSUNDEEP
htmlcss
Dalibor
Dalibor

Reputation: 163

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?

Upvotes: 2

Views: 2943

Answers (3)

Paulie_D
Paulie_D

Reputation: 115373

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

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>

Upvotes: 6

Paul Kozlovitch
Paul Kozlovitch

Reputation: 814

Both your css selectors matches the same element, that's why only one transform is applied (rotate(90deg) is applied, translateY(-50%) isn't). But you can chain transforms! So solution to your problem will look like this:

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

Upvotes: 0

user4051844
user4051844

Reputation:

I centered the texts parent div first, centered the text inside using text-align and vertical-align, and rotated the text inside.

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

Upvotes: 0

Related Questions