CSS "Transform: Rotate()" Affecting Overall Design with "Position: Absolute" (Not Aligning Properly)

CSS transform: rotate() affecting overall design with position: absolute (not aligning properly)

This happens because the nav element has different width and height. By default an element is rotated by its centre, so in case of your nav the corners of this block after rotation don't match. The solution to this problem is to set the transform-orgin property that will move the rotation point so that the bottom left corners before and after transformation are in the same place. In your case it's transform-origin: 75px 75px; (works independently of the <a> length).

Here's the fiddle

Unfortunately it won't solve the problem for IE8- as those browsers doesn't support transformation and use their own way of rotating things.

CSS position absolute stops the rotate property

from the link here https://wojtek.denisdev.pl i can see only one error from your css file that causes that error and here it is ;

so your resulting css for the boar.png was

transform: rotate(
45deg) position: absolute;

which was missing the the closing css tag ;

for it to work, copy and replace this code with the above code in the boar.png line completely

<img src="boar.png" id="1" style="transform: rotate(45deg);position: absolute;">

Endless Rotating DIV but with Absolute Positioning

When using the animation you are overriding the initial transform property by specifying a new one. Instead you need to append rotation to translate in order to keep both of them working:

.randomName {  background-color: orange;  width: 150px;  height: 150px;  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);  animation: orbita 2s linear infinite;  -webkit-animation: orbita 2s linear infinite;  -moz-animation: orbita 2s linear infinite;  -o-animation: orbita 2s linear infinite;}
@keyframes orbita {  0% {    transform:translate(-50%, -50%) rotate(0deg);  }  100% {    transform:translate(-50%, -50%) rotate(360deg);  }}

<div class="randomName"></div>

How to rotate text and position it properly? (CSS, HTML)

The solution was a combination of Diego's answer and Smamatti's comment:

I had to use transform-origin:bottom and width:0. That was working rather quickly, the big problem I had was positioning the text independently to the length of the text. I've only managed to do this by using javascript.

.header
{
    margin: 0;
    width: 0;
    white-space: nowrap;
    position: absolute;
    text-align: left;
    transform-origin: bottom; 
    margin-top: 280px;
    transform: rotate(270deg);
}

Javascript (to ensure compatibility to variables text length):

function adjustSideHeader() {

//check if the headline is visible
  if($('h1.headline').length > 0)
  {
    var headline = $('h1.headline')[0];
    var stringLength = headline.textContent.length;
    //add style tag to support media queries
    document.querySelector('style').textContent +=
       "h1.headline { margin-top: " + (stringLength*23.5) + "px; -webkit-transition: margin-top 2s; transition: margin-top 2s;}"
  }    
}

// fire it when document is loaded
$(document).ready(setTimeout(adjustSideHeader, 300));

Result:

---

Related Topics