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.
Asked
Active
Viewed 227 times
0
haim770
- 48,394
- 7
- 105
- 133
user2534406
- 65
- 1
- 7
-
[Example](http://jsfiddle.net/gaby/9Ryvs/7/) from [this answer](http://stackoverflow.com/a/14859567/1763929). – Vucko Jul 02 '13 at 10:38
-
1can you make a JSfiddle so we can update your code – Muath Jul 02 '13 at 10:39
1 Answers
0
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/
xec
- 17,349
- 3
- 46
- 54
-
One issue though is when I replicate it in IE or firefox both the back and the front show up 100% of the time – user2534406 Jul 02 '13 at 12:18
-
@user2534406 You would need the appropriate vendor prefixes for the `backface-visibility` - http://jsfiddle.net/4Z4sF/1/ seems to work fine in my firefox – xec Jul 02 '13 at 12:26