Mark
#1

 Hola, continuando con los trabajos sencillos, pero 煤tiles les dejar茅 un efecto para im谩genes, aunque este mismo efecto puede ser utilizado para elementos como letras o bloques de textos yo lo veo mas vistoso y 煤til para las im谩genes, aun as铆 puede ser utilizado como mas les satisface, para este efecto utilizaremos tambi茅n la propiedad "transform: rotate" la cual explique su funcionalidad en mi anterior Entrada sobre los distintos efectos que se pueden obtener, comencemos con la explicaci贸n:

Ejemplo 1

copia y pega el siguiente c贸digo css en donde tengas los estilos de tu web, si usas blogger busca ]]></b:skin> y arriba pega el siguiente c贸digo:

See the Pen Voltear imagenes utilizando CSS3 - 1/3 by eltorga (@eltorga) on CodePen.

Luego, para llamar al efecto colocamos esto (class="efecto-voltear") dentro de la etiqueta "img" de esta forma:

See the Pen Voltear imagenes utilizando CSS3 - 1/3 by eltorga (@eltorga) on CodePen.

 El resultado ser谩 el siguiente:

See the Pen Voltear imagenes utilizando CSS3 - 1/3 by eltorga (@eltorga) on CodePen.

Ejemplo 2

copia y pega el siguiente c贸digo css en donde tengas los estilos de tu web, si usas blogger busca ]]></b:skin> y arriba pega el siguiente c贸digo

See the Pen Voltear imagenes utilizando CSS3 - 2/3 by eltorga (@eltorga) on CodePen.

Luego, para llamar al efecto colocamos esto (class="efecto-voltear-dos") dentro de la etiqueta "img" de esta forma:

See the Pen Voltear imagenes utilizando CSS3 - 2/3 by eltorga (@eltorga) on CodePen.

El resultado ser谩 el siguiente:

See the Pen Voltear imagenes utilizando CSS3 - 2/3 by eltorga (@eltorga) on CodePen.

Lo que acabamos de hacer aqu铆 es decirle objeto que gire 180°, ya sea en vertical (X) o en horizontal (Y), al igual que mi anterior entrada podemos decidir si queremos que el objeto o la imagen se voltee de arriba hacia abajo o de abajo hacia arriba, al igual que de izquierda a derecha o derecha a izquierda aplic谩ndole un signo de resta (-) dentro del valor designado de esta forma: (-180deg)

Ejemplo 3

Tambi茅n podemos ordenarle al objeto que de una vuelta completa regresando a su posici贸n original, para ello le indicaremos que gire 360° y aumentar茅 el tiempo de la animaci贸n a 1 segundo para apreciar mejor el efecto

copia y pega el siguiente c贸digo css en donde tengas los estilos de tu web, si usas blogger busca ]]></b:skin> y arriba pega el siguiente c贸digo

See the Pen Voltear imagenes utilizando CSS3 - 3/3 by eltorga (@eltorga) on CodePen.

 Luego para llamar al efecto colocamos esto (class="efecto-voltear-tres") dentro de la etiqueta "img" de esta forma:

See the Pen Voltear imagenes utilizando CSS3 - 3/3 by eltorga (@eltorga) on CodePen.

 El resultado sera el siguiente:

See the Pen Voltear imagenes utilizando CSS3 - 3/3 by eltorga (@eltorga) on CodePen.

Bueno amigos eso fue todo, espero que les haya gustado, cualquier duda o inquietud, d茅jenla en un comentario ^^


image quote pre code
Compartir: