Geometría en las aplicaciones web II

Hace algunos años atrás, escribí una entrada relacionada con aplicar la geometría y en particular la trigonometría en las aplicaciones web en el lado del cliente con altos requerimientos de animaciones e interactividad. Hoy vamos a profundizar algo más en este asunto estudiando un tema un poco más avanzado en el mundo de la geometría: las matrices de rotación.

Leer más »

Animación de papel plegado usando solo CSS

Hace un tiempo atrás estuve experimentando con transformaciones y transiciones en CSS3 usando para ello Sass. Decidí entonces pasar estos experimentos a un Codepen para compartirlo con la comunidad porque me parecieron intersantes.

Leer más »

Animación 3D de un plano usando CSS3

Hace unos días respondí una pregunta en Stack Overflow en la cual se pedía traducir una animación 3D de un plano, realizada con Popmotion a GreenSock.

Respondiendo a dicha pregunta resultó el siguiente código JavaScript que replica el mismo efecto de la animación original, pero usando para ello solo cálculos en JavaScript

Leer más »

Proyecciones isométricas en CSS3

Hace algún tiempo atrás abordamos el tema de las proyecciones isométricas y los cálculos matemáticos usados para transformar cada uno de los planos que las componían. En el presente tutorial veremos cómo crear proyecciones isométricas usando para ello solamente HTML y transformaciones CSS3.

Leer más »

Transformaciones y transiciones en CSS3

Hace mucho tiempo que venía dándole vueltas a hacer un tutorial básico que tratara el tema de las transformaciones y transiciones en CSS3. Este tipo de técnica nos permite crear transformaciones de elementos HTML o incluso animarlos sin tener que recurrir para ello a JavaScript. Al hacer uso de las transformaciones mediante hojas de estilo los cálculos se los dejamos a la GPU en vez de dejar que sea la CPU quien se encargue de esta tarea, por lo que dependiendo del caso las animaciones tienden a ser más suaves y precisas debido a que este tipo de tareas permiten trabajar con números no enteros.

Leer más »