Code, in other words Coding is a term that we rarely use on ABDZ. Maybe because most of us are designers and designers shouldn't right? We beg to differ but we'll leave it for another article. How about a game that teaches you how to? Yay!
Start a new HTML document and add some elements, one "Section" and then a list "UL" with a few objects "LI"
Step 3 - Animating the list
To animate the list is pretty simple, the first and most important thing to do is to have a little script of what you want to animate. In this first case we will animate one LI at the time fading in and sliding down from the top.
So what we are doing in that function is to find each "LI"strong> and then for each one we will set with CSS to move them "-30px"strong> in the Y axis (top) and change the opacity to 0. After that with jQuery Transition we will move it back to the original position. To make sure each one move at different time we will set a delay to 200 and multiply that by "i" (each element have their unique "i").
Step 4 - some 3D rotations
The only thing we added here was the rotateX and transformOrigin for the CSS and perspective and rotateX for the transition. You can play with these values to change the animation as well.