Amir Bar Amir Bar - 18 days ago 5
CSS Question

Rotating an object on its side using CSS

Take, for example, a square with points A, B, C and D:

a---b
- -
- -
c---d


I want to rotate it from left to right so points A and C will come closer to B and D, while B and D will stay in position.

It's a lot like flipping a page in a book, so the page flips to the other side but points B and D are not moving.

The closest thing I have is https://jsfiddle.net/pa9ykhwa/, which is basically

div{
transform-style: preserve-3d;
transition-duration: 1s;
}

div:hover {
transform-origin: 100%;
transform: rotateY(180deg) translateZ(0);
}


The problem is that you can clearly see points B and D are moving.

Answer

You are transitioning not only the rotation, but also the transform origin

It isn't set on the unhovered state, so it is the 50% default value

Corrected :

div {
  height: 200px;
  width: 200px;
  background-color: red;
  transform-style: preserve-3d;
  transition-duration: 1s;
  transform-origin: 100%;
}
div:hover {
  transform: rotateY(180deg) translateZ(0);
}
<div style="">

</div>

Comments