Rotating an object on its side using CSS

Question

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 1

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>