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

Corazón con CSS

Corazón con CSS

Editable Listview con jQuery

Editable Listview con jQuery

MixitUp 3: animaciones y manipulación del DOM

MixitUp 3: animaciones y manipulación del DOM

Algunos artículos que te pueden interesar

Guía rápida sobre los bordes en CSS

Guía rápida sobre los bordes en CSS

Con esta propiedad es posible definir el color, tamaño y estilo del cada uno de los 4 bordes que definen la caja de un elemento

Andrés Cruz 17-02-2014

El elemento meter HTML5

El elemento meter HTML5

La función de la etiqueta meter es la de indicar una medida dentro de un rango; es decir debe ser acotada, tener un inicio y un fin.

Andrés Cruz 16-12-2013

Múltiples capas: Efecto de apertura de una puerta con CSS

Múltiples capas: Efecto de apertura de una puerta con CSS

En esta entrada veremos un experimento compuestos por múltiples divs solapados (capas) y emplearemos las transformaciones 3D en CSS en conjunto con el selector hover podremos crear una transición que emula el efecto de apertura de una puerta.

Andrés Cruz 13-08-2015