markdown guide
 

Nice but not scaleable. Just try changing the width/height, falls apart, animation and axis alignment no longer looks right.

 

It is perfectly scalable.

Just add scale(.5); in line 14 in .wrapper transform and you will have it half the size.

 

not scaleable with scale(). The element will still take up its original size in the document, so you may need to use negative margins to deal with it, it's a bit inconvenient and hackish to apply negative margins for this case.

Also, does not lend well to a responsive layout. These issues have to be fixed so that width and height can be controller from parent button.

 
 
 

This is cool. Do you have codepen link for this code?

 

If you click on the codepen logo in the upper right it will take you to the webpage. Full link to the pen is codepen.io/ahmadbassamemran/pen/ab...

cheers ✌🏽️

 

Thanks,
The Source Code link in description below youtube video

 
 
 

Man, that's the slickest animation I've seen using just simple spans. How easy is it for you to create these type of animations, does it require a lot of trial and error?

 
 
 
Classic DEV Post from Jan 25

Language Features: Best and Worst

I'm interested in building my own programming language and I want to know: what...

Ahmad Emran profile image
I have several years of commercial experience in HTML5, CSS3, Sass, javaScript, jQuery, Greensock.js, ADF Skin, Photoshop & Illustrator. I'm renowned for fast HTML and CSS coding.