Elementos reversibles 3D
Hemos visto que para animar "cosas" en CSS3 podemos utilizar fotogramas ( @keyframes ) o transiciones ( transition ). A continuación para crear elementos reversibles utilizamos transiciones sencillamente porque se necesitan menos líneas de código.
Qué queremos conseguir
Al pasar con el ratón por encima del elemento amarillo, este dará la vuelta en una animación que dura 2 segundos.
En el HTML hay dos <div>s, uno para la .cara y otro para el .verso del elemento .reversible.
Los dos <div>s están posicionados absolute dentro de <div class="reversible"> de tal manera que se queden uno encima del otro.
La .cara tiene z-index: 2; para que aparezca encima del .verso.
Además el .verso esta girado 180º ( transform: rotateY( 180deg ); ), para que, al girar de nuevo con todo el grupo, el .verso se quede de cara al usuario.
Los dos <div>s aparecen anidados dentro de otro <div class="reversible">, que a su turno se encuentra dentro de un .contenedor. Es al div .reversible que haremos girar.
La perspectiva
En un dibujo, la perspectiva simula la tercera dimensión, da al observador la sensación de profundidad y volumen. La perspectiva depende de la posición del observador.
En CSS3 la propiedad perspective determina la distancia entre el observador virtual, y el objeto.
Cuanto más pequeño el valor de perspective, más cerca estamos del objeto, y por lo tanto más impresionante el efecto visual. Por lo contrario, cuanto más grande el valor de perspective, más lejos estamos del objeto, y la deformación es menos importante.
Abajo aparecen 6 <div>s rotados unos 60º con rotateY(). La perspectiva cambia progresivamente, desde 100px hasta 600px. DEMO
En nuestro caso el valor de perspective para el .contenedor es de 400px.
.contenedor{
-webkit-perspective:400px;
perspective:400px;
}
Chris Coyier acerca de Perspective
La propiedad transform-style
La propiedad transform-style decide si los elementos anidados preservan las transformaciones 3D ( preserve-3d ) o no ( flat ).
En nuestro caso queremos que el elemento .reversible tenga transform-style: preserve-3d ya que queremos que los elementos hijos tengan un aspecto tridimensional ( 3d ). DEMO
.reversible{
position:relative;
width:150px;
height:150px;
margin:0 auto;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 2s ease;
-webkit-transition: transform 2s ease;
transition: transform 2s ease;
}La propiedad backface-visibility
La propiedad backface-visibility decide si un elemento, girado 180º alrededor del eje X o Y, debe seguir visible ( el valor por defecto ) o no ( hidden ).
En nuestro caso es importante que tanto el .verso como la .cara tengan backface-visibility: hidden ya que no nos interesa que su revés sea visible.
.reversible div{
position:absolute;
left:0;
top:0;
width: 150px;
height: 150px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
Poniéndolo todo junto
.contenedor {
-webkit-perspective: 400px;
perspective: 400px;
}
.reversible {
position: relative;
width: 150px;
height: 150px;
margin: 0 auto;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 2s ease;
-webkit-transition: transform 2s ease;
transition: transform 2s ease;
}
div.reversible:hover {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.reversible div {
position: absolute;
left: 0;
top: 0;
width: 150px;
height: 150px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.reversible div:after {
content: attr(data-transitions);
display: block;
position: relative;
top: 70px;
text-align: center;
}
.cara {
background-color: gold;
z-index: 2;
}
.verso {
background-color: black;
color: #aaa;
-webkit-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}