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

Advanced CSS animations

Advanced CSS animations

Problem

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

Solution

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: http://jsfiddle.net/4Z4sF/

Solution courtesy of: xec

Discussion

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

×