DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
30-03-2015

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:


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Loader Battlenet

Loader Battlenet

Animación Torus solo con HTML y CSS

Animación Torus solo con HTML y CSS

Sistema sola con CSS

Sistema sola con CSS

Algunos artículos que te pueden interesar

¿Qué es LESS CSS?

¿Qué es LESS CSS?

LESS CSS es una extensión de CSS que nos permite agregar dinamismo al CSS tradicional.

Andrés Cruz 12-09-2013

Cómo crear anillos de circulos en JavaScript y Canvas

Cómo crear anillos de circulos en JavaScript y Canvas

En esta entrada veremos cómo crear un sistema sencillo de anillos de círculos con Canvas y JavaScript; para esto se hará uso de la función requestAnimationFrame() y animar el Canvas.

Andrés Cruz 16-11-2015

La pseudo-class :empty en CSS

La pseudo-class :empty en CSS

En esta entrada veremos como funciona y cómo usar la poco usada y conocida pseudo-class :empty.

Andrés Cruz 15-12-2014