i am trying to mimic an effect found usually on mobile devices where you have a panel and when u click a button it spins around and on the other side it has some other info.
i found some code that usses css transitions and here is an example
the js
$('#signup').on('click', function(e) {
e.preventDefault();
document.getElementById( 'side-2' ).className = 'flip flip-side-1';
document.getElementById( 'side-1' ).className = 'flip flip-side-2';
});
$('#create').on('click', function(e) {
e.preventDefault();
document.getElementById( 'side-2' ).className = 'flip';
document.getElementById( 'side-1' ).className = 'flip';
});
the issue with this example is that if i convert javascript into jquery it stopps working:
from:
document.getElementById( 'side-2' ).className = 'flip flip-side-1';
to
$( '#side-2' ).addClass('flip flip-side-1');
Also im not sure if there isn't already a jquery plugin that does this in a better way.
Any ideas?
some more code. html
<div id="side-1" class="flip">
<a id="signup" href="#">sign up</a>
</div>
<div id="side-2" class="flip">
<a id="create" href="#">create</a>
</div>
css
.flip {
backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border: 1px solid black;
transform-origin: 50% 50% 0px;
-moz-transform-origin: 50% 50% 0px;
-ms-transform-origin: 50% 50% 0px;
-o-transform-origin: 50% 50% 0px;
-webkit-transform-origin: 50% 50% 0px;
transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
}
#side-1 {
transform: rotateY( 0deg );
-moz-transform: rotateY( 0deg );
-ms-transform: rotateY( 0deg );
-o-transform: rotateY( 0deg );
-webkit-transform: rotateY( 0deg );
}
#side-2 {
transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-ms-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
-webkit-transform: rotateY( 180deg );
}
.flip-side-1 {
transform: rotateY( 0deg ) !important;
-moz-transform: rotateY( 0deg ) !important;
-ms-transform: rotateY( 0deg ) !important;
-o-transform: rotateY( 0deg ) !important;
-webkit-transform: rotateY( 0deg ) !important;
}
.flip-side-2 {
transform: rotateY( 180deg ) !important;
-moz-transform: rotateY( 180deg ) !important;
-ms-transform: rotateY( 180deg ) !important;
-o-transform: rotateY( 180deg ) !important;
-webkit-transform: rotateY( 180deg ) !important;
}
http://lab.smashup.it/flip/ is the best I've found for this.