CSS rotation of an object

Question

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

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

I want to turn it from left to right so that points A and C are closer to B and D, and B and D remain in position.

This is very similar to turning a page in a book, so the page flips to the other side, but points B and D do not move.

The closest 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 how points B and D move.

Answer 1

You perform not only rotation, but also the beginning of the transformation

It is not installed in an incomplete state, so this is the default value of 50%

Fixed:

 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>