Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Advanced CSS animations

Advanced CSS animations


I have been looking over this example and wanting to take it up a notch, I am trying for the number "1" card to start off like this (-webkit-transform: rotateZ( 160deg );) and rotateZ towards 0 WHILE flipping, I've been playing around with the matrix and skewing and cannot seem to get that effect.

Problem courtesy of: user2534406


You can give the same transform property multiple (space separated) transform-functions at the same time, something like this in your case;

#card .front {
    transition: all 1s;
    transform: rotateY(0deg) rotateZ(200deg);
#card.flipped .front {
    transform: rotateY(180deg) rotateZ(0deg);

(The same applies to the backface)

Chrome-only demo:

Solution courtesy of: xec


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Advanced CSS animations


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription