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.

El siguiente experimento consiste en la animación dinámica de un plano dando el efecto de un papel plegado. Para lograrlo solo he utilizado un elemento DIV en el HTML y código CSS usando SASS. La animación puede ser variada en cuanto a cantidad de dobleces y la velocidad de cada doblez modificando unas variables globales en SASS.

Es importante aclarar que el código SASS es ilegible y complejo de leer aparte de generar una ingente cantidad de código CSS al compilar. Solo deberías utilizarlo para experimentar, divertirte codificando y ver las posibilidades de SASS generando transformaciones dinámicamente, pero por ningún motivo te recomendaría que usaras un código similar para un proyecto en producción.

Si haces algún fork del proyecto y logras algo que crees que pudiera ser interesante también te agradecería que lo compartieras con la comunidad.

Ver el código en by (@elchininet) on CodePen.3

(2 votos, promedio: 5,00 de 5)
Comparte este artículo:

Puedes situar fragmentos de código dentro de etiquetas <pre></pre> y código HTML o XML entre etiquetas <xmp></xmp>.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Time limit is exhausted. Please reload CAPTCHA.