Id like to easy flip a text upside down, like this page is doing: http://papertiger.com/
I want to do this as easy as possible, using
-webkit-transition: 0s;
-webkit-transform rotateX(180deg)
This is my code: HTML:
<script>
$(document).ready(function() {
Js.init();
});
</script>
<body>
<div id="flipbox">
<p id="text">Front</p>
</div>
</body>
JAVASCRIPT:
var Js = {
init: function() {
var up=true;
//do this every 5 seconds
var i = window.setInterval( function(){
up=!up;
Js.rotate(up);
//this will run just once after the timeout
var j = window.setTimeout( function(){
//Js.switchText(up);
}, 1000 );
}, 5000 );
},
rotate: function(up){
if(up){
$("#flipbox").removeClass('rotateDown');
$("#flipbox").addClass('rotateUp');
}else{
$("#flibox").removeClass('rotateUp');
$("#flipbox").addClass('rotateDown');
}
},
switchText: function(up) {
if(up){
$("#text").text('front');
}else{
$("#text").text('back');
}
}
}
CSS:
#flipbox{
color: green;
display: block;
font-size: 70px;
perspective: 800px;
perspective-origin: 50% 100px;
}
.rotateDown{
transition: 2s;
-webkit-transform: rotateX(180deg);
}
.rotateUp{
transition: 2s;
-webkit-transform: rotateX(0deg);
}
.upSideDown{
-webkit-transition: 0s;
-webkit-transform: rotate(180deg);
}
As it is now, I get the text "First" to rotate as I want to. To switch the text and rotate it in Y 180 degrees (to make it readable, since its now upside down), does not work, and is why the line is commented.
So, I think I need to have the text rotated by both X and Y 180 degress, how do I do that? rotate3d(1,1,0,180deg) does not work like that. If I write rotateX followed by rotateY, the first one gets overwritten.
...or is the jQuery plugin flippy somthing I should look for?
Ive tried to make a jsfiddle. It did not work, but can be found here: http://jsfiddle.net/EdNVw/
Thanks in advace for any advice!