Cambia el origen de las rotaciones 3D

Una parte que es indispensable para las rotaciones de elementos en 3D es determinar el origen de la rotación, que nos puede servir de ayuda para crear efectos más complejos con CSS3.
Una transformación 3D por defecto se realiza en el centro del elemento, pero podemos cambiar su origen, y por ejemplo, se puede realizar desde un lateral la rotación y puede hacer el movimiento de pasar una página.

La propiedad para cambiar el origen de la transformación transform-origin, y podemos establecer el origen en cualquiera de los tres ejes (X, Y y Z, por este orden).
Esta propiedad sirve para cualquier transformación, como rotaciones o traslaciones.

Rotar con origen en un lateral

Al igual que en los ejemplos anteriores ahora haremos una rotación desde los distintos lados del cuadrado, y realizaremos una rotación de 180deg (como recordaréis deg significa grados).
Al cambiar de cuadro de color cambiará el lugar hacia donde rota el elemento, como si destapásemos una caja por ejemplo.

Si queremos que se haga el efecto hacía la derecha debemos de establecer que el origen de la rotación en el eje X fuese el 100% (y por otro lado el eje Y estaría al 50% para que se centrase).

Rotar con origen en una esquina

Si queremos realizar una rotación desde una esquina se sigue el mismo procedimiento, el origen tiene que estar con eje X y el eje Y en el comienzo o en el final (0% o 100%) y a parti de aquí podemos hacer cualquier rotación 3D desde una esquina.