3D Flipping Circle with CSS3 and jQuery

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.