Search code examples
cssrotationcentering

Centering divs in rotated divs

I am going crazy, I'm trying to center some divs (relatively to the viewport). The problem is that those divs that I want to center are nested in some rotated div (4deg).

.inner-wrap{
   width: 200vw;
   position: relative;
   padding: 20vh 0;
   right: -50vw;
   left: -50vw;
   bottom: -50px;
   transform-origin: bottom left;
   transform: rotate(-4deg);// HERE THE ROTATION
   margin: auto;
}

I corrected the angle for the text in the article nested in the .inner-wraps

article{
  transform: rotate(4deg);
  max-width: 960px;
  margin: auto;
}

THE PROBLEM: The two rotations let the content slide a bit on the left resulting a bit annoying see the link :)

https://drive.google.com/file/d/0Bw4B9Lk7vRtda3p4TWpWNzhBZVU/view?usp=sharing

How can I fix this?

Solution

  • Ok, I'm an idiot! I setted the rotation origin as bottom left instead of center ....