Presta atención porque en este artículo vas a encontrar el arreglo que buscas.Este enunciado fue analizado por nuestros especialistas para garantizar la calidad y veracidad de nuestro contenido.
El truco es establecer esta rotación antes de la rotación de 45 grados:
Tenga en cuenta también que para que la rotación se comporte realmente como se esperaba, debe establecerlo en 0 en el estado base
.container
width: 200px;
height: 200px;
margin: 100px;
border: solid 1px;
transform: rotateY(0deg) rotate(45deg); /* needs Y at 0 deg to behave properly*/
transition: transform 2s;
.container:hover
transform: rotateY(180deg) rotate(45deg); /* notice the order */
.inner
margin: 50px;
transform: rotate(-45deg);
INNER
Así es como interpreto la pregunta. No estoy muy contento con la demostración ya que necesita mucha estructura. ¿Pero tal vez puedas verificar el comportamiento?
Básicamente uso un envoltorio para rotar en el eje y. Está key para establecer el origen de transformación en el centro. El envoltorio adicional se utiliza para evitar un parpadeo al pasar el ratón por encima.
https://jsfiddle.net/nm59mqky/1/
.tile
transform: rotateY(0);
transform-origin: center center;
.wrapper:hover .tile
transform: rotateY(180deg);
Si conservas alguna suspicacia y capacidad de avanzar nuestro sección te invitamos realizar una aclaración y con deseo lo ojearemos.