Elementos reversibles con estilo 3D en CSS

30-03-2015 - Andrés Cruz

Elementos reversibles con estilo 3D en CSS

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

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:

2
1

Posiciona el cursor encima del contenedor de color verde.

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:

2
1

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:

2
1

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:

Les dejo un link de un excelente artículo en el cual me apoyé para crear esta entrada:


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!