currently the transition slides from left to right. And idea how I would make it appear that it goes from top to bottom?
Here is the code: http://jsfiddle.net/lakario/VPjX9/
Here is some of the css code:
.flip {
-webkit-backface-visibility:hidden;
-webkit-transform:translateX(0);
-moz-backface-visibility:hidden;
-moz-transform:translateX(0);
}
.flip.in.reverse {
-webkit-animation-name: flipintoleft;
-moz-animation-name: flipintoleft;
}
@-webkit-keyframes flipouttoleft {
from { -webkit-transform: rotateY(0); }
to { -webkit-transform: rotateY(-90deg) scale(.9); }
}
@-moz-keyframes flipouttoleft {
from { -moz-transform: rotateY(0); }
to { -moz-transform: rotateY(-90deg) scale(.9); }
}
@-webkit-keyframes flipouttoright {
from { -webkit-transform: rotateY(0) ; }
to { -webkit-transform: rotateY(90deg) scale(.9); }
}
@-moz-keyframes flipouttoright {
from { -moz-transform: rotateY(0); }
to { -moz-transform: rotateY(90deg) scale(.9); }
}
@-webkit-keyframes flipintoleft {
from { -webkit-transform: rotateY(-90deg) scale(.9); }
to { -webkit-transform: rotateY(0); }
}
@-moz-keyframes flipintoleft {
from { -moz-transform: rotateY(-90deg) scale(.9); }
to { -moz-transform: rotateY(0); }
}
@-webkit-keyframes flipintoright {
from { -webkit-transform: rotateY(90deg) scale(.9); }
to { -webkit-transform: rotateY(0); }
}
@-moz-keyframes flipintoright {
from { -moz-transform: rotateY(90deg) scale(.9); }
to { -moz-transform: rotateY(0); }
}
Here you go!
http://jsfiddle.net/VPjX9/289/
I'm sure there's a cleaner way to do it, but I just changed the rotate Y values in your CSS to rotate X, so it's along the X axis.
Example: Was:
@-moz-keyframes flipintoleft {
from { -moz-transform: rotateX(-90deg) scale(.9); }
to { -moz-transform: rotateY(0); }}
Now is:
@-moz-keyframes flipintoleft {
from { -moz-transform: rotateX(-90deg) scale(.9); }
to { -moz-transform: rotateY(0); }}
Instead of using rotateY
, use rotateX
, which will fix the axis horizontally, instead of vertically.
Example: http://jsfiddle.net/VPjX9/287/
If you want it to rotate the other way, just switch -90deg for 90deg and vice versa.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.