Gire el elemento de 45 grados alrededor del eje vertical

Solución:

El truco consiste en 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 espera, debe establecerla 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);
}

<div class="container">
<div class="inner">INNER</div>
</div>

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 una envoltura para rotar en el eje y. Es clave establecer el origen de la transformación en el centro. La envoltura adicional se usa para evitar un parpadeo al pasar el mouse.

https://jsfiddle.net/nm59mqky/1/

.tile {
  transform: rotateY(0);
  transform-origin: center center;  
}

.wrapper:hover .tile {
  transform: rotateY(180deg);
}

---

---

Utiliza Nuestro Buscador