Saltar al contenido

Rotar elemento de 45 grados alrededor del eje vertical

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.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)


Tags :

Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *