Paper folding animation using only CSS

Some time ago, I was experimenting with CSS3 transformations and transitions using Sass. Then, I decided to port these experiments into a Codepen to share it with the Internet community because I think that they are interesting.

The next experiment consists in a dynamic animation of a plane giving an effect of a paper being folded. To achieve this I have used just a DIV element in the HTML and CSS code using Sass. The animation can be modified in term of number of folds and the speed of each one changing some global variables in the Sass code.

It is important to remark, that the Sass code used is almost unreadable and complex besides of generating a bunch of CSS code when compiles. You should use it just to experiment, get fun coding and see the possibilities of Sass dynamically generating CSS transformations, but I don’t recommend you in any case using a similar code in a real project in production.

If you make a fork of the project and you get something interesting too, I would request you to share it with the Internet community.

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

(2 votes, average: 5.00 Out Of 5)
Share this post:

It is possible to insert code fragments between <pre></pre> tags and HTML or XML code between <xmp></xmp> tags.

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.