3D Flipping Circle with CSS3 and jQuery
File Size: | 310 KB |
---|---|
Views Total: | 4423 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Makes use of CSS3 transforms / transitions and a bit jQuery to create a cool 3D flipping circle which is great for online invitation cards.
How to use it:
1. Load the core stylesheet style.css
in the head section of the html document.
<link rel="stylesheet" href="css/style.css">
2. The required html structure for the flipping circle.
<div class="click"></div> <div id="fc-wrapper" class="fc-wrapper"> <!-- right-most handle piece --> <div class="fc-handle fc-handle-pull"></div> <div class="fc-perspective"> <!-- right part overlay; get's darker --> <div class="fc-overlay fc-overlay-reverse"></div> <!-- middle handle piece --> <div class="fc-handle fc-handle-out"><div></div></div> <!-- inner bottom content part --> <div class="fc-bottom"> <div class="fc-bottom-bg"> <div class="fc-content"> <p>Content here</p> </div> </div> <div class="fc-overlay fc-overlay-solid"></div> </div><!-- //fc-bottom --> <!-- front and back of the flipping half --> <div class="fc-flip"> <div class="fc-front"> <div class="fc-inner"> <div class="fc-overlay fc-overlay-left"></div> <!-- left-most part of handle --> <div class="fc-handle fc-handle-in"><div></div></div> <div class="fc-content"> <h3>Content Here</h3> </div> </div> </div><!-- //fc-front --> <div class="fc-back"> <div class="fc-inner"> <div class="fc-content"> <div class="feynman"> <span>Content here</span> </div> </div> <div class="fc-overlay fc-overlay-right"></div> </div> </div><!-- //fc-back --> </div><!-- //fc-flip --> </div><!-- //fc-perspective --> </div>
3. Load the latest version of jQuery JavaScript library from a CDN.
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
4. The JavaScript to active the 3D flip effect.
$(function() { var $wrapper= $( '#fc-wrapper' ), $handle = $wrapper.children( 'div.fc-handle-pull' ); $handle.on( 'click', function( event ) { ( $handle.data( 'opened' ) ) ? close() : open(); }); function open() { $wrapper.addClass( 'fc-wrapper-open' ); $handle.data( 'opened', true ); } function close() { $wrapper.removeClass( 'fc-wrapper-open' ); $handle.data( 'opened', false ); } });
This awesome jQuery plugin is developed by NYCL. For more Advanced Usages, please check the demo page or visit the official website.