Elementos reversibles con estilo 3D en CSS

A lo largo del tiempo, hemos visto muchas cosas que podemos hacer con CSS; los selectores, animaciones y transiciones son algunos de los muchos componentes que muchas veces se encuentran presentes en las entradas anteriores sobre CSS, y esto es debido en gran parte a su versatilidad, fácil uso y por el gran efecto visual que se logra; esta entrada no será una excepción y veremos como hacer que un elemento sea reversible empleando las transiciones en CSS y las animaciones en CSS como un componente clave para la reversibilidad de los elementos HTML:

Posiciona el cursor encima del contenedor de color verde.

Ver ejemplo Descargar

1.0 El código HTML

El código HTML base que emplearemos para mostrar todos los ejemplos es el siguiente:

        <div class="reversible reversibleImagen">
            <div id="atras"><span>1</span>
            </div>
            <div id="adelante"><span>2</span>
            </div>
        </div>

Tenemos dos divs que llamaremos adelante y atras respectivamente dentro de un bloque u otro div llamado reversible; la idea general es localizar ambos divs internos (adelante y atras) en una misma posición y rotar a su padre (reverso) para mostrar los divs de adelante a atrás y viceversa.

2.0 El código CSS

Antes de mostrar el CSS explicaremos las partes más importantes que debe de formar parte el CSS para hacer que un elemento sea reversible; veamos:

2.1 La propiedad perspectiva en CSS

La perspectiva en CSS agrega un factor de profundidad (Z) en los elementos HTML que es esencial para visualizar correctamente nuestro ejemplo; aunque ya existe una entrada en la que hablamos sobre la propiedad perspectiva en CSS más en detalle: Entendiendo la propiedad perspective (perspectiva) en CSS; esta propiedad será aplicado al padre del elemento reverso (que es el que rota).

2.2 La propiedad transform-style en CSS

Determina que los hijos del elemento asignado puedan ser visto en el espacio 3D ( preserve-3d) o no (flat).

2.3 La propiedad backface-visibility en CSS

Esta propiedad indica que si un elemento visto por su reverso (girado 180 grados) o -por detrás- debe ser visible (por defecto) o no; para nuestro ejemplo nos interesa que no sea visible debido a que al reverso de un elemento se encuentra otro elemento (adelante y atras).

Finalmente, el CSS:

.reversible{
    -webkit-transform-style : preserve-3d;
    transform-style : preserve-3d;
    -webkit-transition : -webkit-transform 3s ease;
    -webkit-transition : transform 3s ease;
    transition : transform 3s ease;
    margin: 0 auto;
    width : 200px;
    height : 200px;
}

.reversible:hover{
    -webkit-transform : rotateY(180deg);
    transform : rotateY(180deg);
}

.reversible div{
    position : absolute;
    top : 300px;
    width : 200px;
    height : 200px;
    -webkit-backface-visibility : hidden;
    backface-visibility : hidden;
    border:3px solid #000000;
}

.reversible div span{
    font-size: 180px;
    display:block;
    text-align:center;
    color:#FFF;
}

.reversible div img{
    width:200px;
    height:200px;
    object-fit: none;
}

.example1, .example2{
    -webkit-perspective : 500px;
    perspective : 500px;
}

#atras{
    background : #00FF00;
    -webkit-transform : rotateY( 180deg );
    transform : rotateY( 180deg );
}

#adelante{
    background : #FF0000;
}

La razón de estas líneas:

#atras{
    /*Otras propiedades y valores*/
    -webkit-transform : rotateY( 180deg );
    transform : rotateY( 180deg );
}

Es para mostrar el div atras, producto del efecto que tendría la propiedad backface-visibility sobre el div:

Ver ejemplo Descargar

Animaciones y los elementos reversibles

Como comentamos al inicio de esta entrada, también es posible emplear las animaciones para crear elementos reversibles como el siguiente:

Ver ejemplo Descargar

Para ello empleamos las siguientes líneas de código CSS:

@-webkit-keyframes reverso {
    0%{
    -webkit-transform : rotateY(0deg);
    transform : rotateY(0deg);
}
50%{
    -webkit-transform : rotateY(180deg);
    transform : rotateY(180deg);
}
100%{
    -webkit-transform : rotateY(0deg);
    transform : rotateY(0deg);
}
}

@keyframes reverso {
    0%{
    -webkit-transform : rotateY(0deg);
    transform : rotateY(0deg);
}
100%{
    -webkit-transform : rotateY(180deg);
    transform : rotateY(180deg);
}
}

.reversibleImagen{
    -webkit-animation: reverso 5s infinite;
    animation: reverso 5s infinite;
}

Inclusive, poniéndonos un poquito más creativos, podemos agregarles imágenes a los divs internos (adelante y atras) en conjunto con la propiedad object-fit tratado anteriormente en: La propiedad object-fit en CSS para ajustar la imagen al contenedor: