DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
30-04-2015

Cómo se ha comentado en posteriores entregas, las transiciones y animaciones en CSS son grandes herramientas que permiten crear cambios suaves entre un estado a otro sin mayores complicaciones; en esta entrada veremos algunos efectos curiosos sobre listas ul (algunos con efectos 3D):

Definiendo el CSS base

Lo primero es lo primero, definir el CSS básico o común que emplearemos en todas las listas:

ul {
  margin: 20px;
  padding: 0;
  list-style-type: decimal;
  transition: all 1s;
}

li {
  line-height: 1.6;
  background: rgba(0,0,0,0.1);
  margin: 0 0 10px 0;
  padding: 4px 8px;
  transition: all 1s;
}

En el CSS mostrado anteriormente no hay mucho que explicar; un fondo de color gris claro y otras propiedades para el espaciado y poco más; con esto obtenemos la siguiente lista:

lista en CSS

1. Efecto de acordeón en el eje de las X

Este primer efecto un tanto pobre simplemente invierte el orden de nuestra lista en el eje de las X como si de un acordeón se tratase; pero nos servirá como guía para entender más fácilmente el resto de los efectos:

Posiciona el cursor encima.

ul:hover {transform: rotateX(180deg);}
ul:hover li {transform: rotateX(-180deg);}

Un detalle importante que notarás en los demás efectos es que se rota el elemento padre ul a la vez que sus hijos lis pero en dirección contraria (efecto que se logra con un valor positivo/negativo).

2. Efecto de girar sobre su eje en el eje de las Z

Este efecto es un poco más visual que el anterior debido a que nos metemos en el "mundo 3D" al no emplear los ejes X y Y e involucrarnos en las rotaciones directamente con el eje de las Z:

Posiciona el cursor encima.

ul:hover {transform: rotateZ(180deg);}
ul:hover li {transform: rotateZ(-180deg);}

Aunque el principio es el mismo del experimento anterior (realizar rotaciones del padre y sus hijos (ul y sus hijos li pero en sentidos contrarios), vemos un detalle que tal vez hayamos pasado por alto en el primer ejemplo, y es que todos los elementos se ven alterada su posición salvo por el central (o el li número tres) y este efecto se consigue debido a como se realizan las rotaciones de manera simultánea pero en sentidos contrarios.

3. Efecto de listas superpuestas horizontalmente

Aunque no lo parezca, el siguiente experimento está compuesto por listas lis que al posicionarnos sobre las mismas recuperan su posición original:

Posiciona el cursor encima.

ul {
/*demas propiedades*/
  transform: rotateZ(90deg);
}

li {
/*demas propiedades*/
  transform: rotateZ(-90deg);
}

ul:hover {
  transform: rotateZ(0deg);

}
ul:hover li {
  color:#000;
  transform: rotateZ(0deg);
}

Es un tanto parecido al anterior, pero esta vez las lista (lis) y su padre (ul) comienzan rotadas en el eje de las Z unos +/-90 grados y se posicionan correctamente para su visualización al pasar el cursor sobre los mismos.

4. Efecto de listas superpuestas horizontalmente -doble vuelta-

Al contrario del segundo experimento; aquí las listas realizan dos vueltas hasta obtener su completa visualización:

Posiciona el cursor encima.

ul {
/*demas propiedades*/
  transform: rotateZ(270deg);
}

li {
/*demas propiedades*/
  transform: rotateZ(-270deg);
}

ul:hover {
  transform: rotateZ(0deg);

}
ul:hover li {
  color:#000;
  transform: rotateZ(0deg);
}

5. Efecto de listas superpuestas verticalmente

Bueno, porque solo limitarse a posicionar las listas en horizontal si las podemos poner en vertical!!!; para esto empleamos rotaciones en el eje de las Y:

Posiciona el cursor encima.

li {
  /*demas propiedades*/
  transform: rotateZ(90deg);
}

body:hover ul {
transform: rotateY(0deg);

}
body:hover ul li {
  color:#000;
  transform: rotateY(0deg);
}

Notarás que empleamos el selector:

body:hover ul {}
body:hover ul li {}

En vez de:

ul:hover {}
ul:hover li {}

Sencillamente por ser obtiene un manejo más fluido al iniciar la transición sobre todo el documento que en una sección del mismo (ul).

Conclusiones

Una vez más vimos algunos ejemplos que podríamos considerar interesantes y la gran versatilidad del CSS que se consiguen con unas pocas líneas de código para las animaciones y transiciones.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Un waffle con CSS

Un waffle con CSS

Flat Module con puro CSS

Flat Module con puro CSS

Eye Candy

Eye Candy

Algunos artículos que te pueden interesar

¿Cómo insertar vídeos de YouTube en nuestra web (HTML)?

¿Cómo insertar vídeos de YouTube en nuestra web (HTML)?

YouTube es una plataforma de contenido digital en la cual puedes encontrar toda clases de vídeos además de brindar opciones que permiten insertar vídeos fácilmente en nuestra web (HTML).

Andrés Cruz 29-06-2015

El atributo pattern en HTML5

El atributo pattern en HTML5

Con este atributo podemos realizar validaciones sin necesidad de usar javascript.

Andrés Cruz 26-07-2013

La propiedad mix-blend-mode en CSS

La propiedad mix-blend-mode en CSS

La propiedad mix-blend-mode especifica cómo un elemento debe mezclarse con el elemento que está debajo de ella.

Andrés Cruz 04-05-2015