jQuery + CSS3 rotating panel
This is just a small proof of concept (so don’t blame me for the lame CSS I created. ;)).
I found out it can be done nicer. (Read this awesome article about flip effects) I only do 90 degree rotations on the Y-axis and do no backside-hiding.
The idea is that a visible panel is seemingly rotated and the backside becomes visible. This works by using transition events. The 1st panel is visible at start and the 2nd panel is hidden. Then when an event is triggered (Hovered in this example) the 1st panel will be rotated 90 degrees (y-axis). The panel is then invisible the animation is ended and an event is triggered. At that point the 2nd panel is made visible and an class is added to trigger to animate it from 90 degrees back to 0 degrees. Thus creating an animation which makes it seem like the panel was completely rotated.
The implementation is currently only working for webkit based browsers.
<!DOCTYPE HTML> <html> <head> <style type="text/css"> div#slide1 { width:100px; height:100px; background:red; -webkit-transition: -webkit-transform 0.5s ease-in; } div#slide2 { width:100px; height:100px; background:green; -webkit-transform: rotateY(90deg); -webkit-transition: -webkit-transform 0.5s ease-in; } div#slide1:hover { -webkit-transform: rotateY(90deg); } div#slide2.foo { -webkit-transform: rotateY(0deg); } </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> document.addEventListener( 'webkitTransitionEnd', function( event ) { $("#slide1").hide(); $("#slide2").show().addClass("foo"); }, false ); </script> </head> <body> <p><b>Note:</b> This example does not work in Internet Explorer.</p> <div id="slide1">Test</div> <div id="slide2" style="display: none;">Awesome</div> <p>Hover over the div element above, to see the transition effect.</p> </body> </html> |