3D Flipping Circle with CSS3 and jQuery

 

View demo Download source
Today we would like to uncover we how to emanate a small member with a picturesque touch. The thought is formed on a honeyed paper outcome found in a video of a Google Developer Stories. Maybe we have combined these kind of paper effects when we were a kid; fundamentally something opens or rotates when pulling or pulling some handle.
We’ll emanate a round with a hoop that will open once a small hoop is clicked, formulating a picturesque 3D flipping outcome with a assistance of CSS 3D transforms and shadows/gradients.
Check out 00:27 of a same video on HTML5 Rocks so that we can see and know a effect.

The Markup

So, let’s start with a markup. We’ll use some groups for a shading effects, a hoop pieces and a round parts. What we need, is a categorical coupling with a category fc-wrapper that will be a circle. On tip of that we will supplement an conceal that will make a right partial of a round darker once we open a rest. From this lower-most round we will indeed only see a right part. The div with a category fc-handle-pull will be a right-most hoop square outward of a circle. We’ll supplement a enclosure for a viewpoint and inside we’ll supplement a mentioned conceal for a right partial and also a second hoop square (it looks like one, yet it’s indeed dual pieces) that has a category fc-handle-out.
Now, we need a multiplication for a left partial that will be manifest once we open a other half. Here we will supplement a quote. Note, that we are also adding some overlays that will assistance us make a opening animation demeanour some-more realistic.
The multiplication with a category fc-flip will enclose a front partial and a behind part. The behind partial will not be manifest given we will stagger it 180 degrees on a Y-axis. It will offer as a backface of a front part. We’ll supplement a final bit of a hoop to a front given we will wish to pierce it when “opening” a flip container.

div class="fc-wrapper"

 !-- right-most hoop square --
 div class="fc-handle fc-handle-pull"/div

 div class="fc-perspective"

  !-- right partial overlay; get's darker --
  div class="fc-overlay fc-overlay-reverse"/div

  !-- core hoop square --
  div class="fc-handle fc-handle-out"div/div/div

  !-- core bottom calm partial --
  div class="fc-bottom"
   div class="fc-bottom-bg"
    div class="fc-content"
     pI can live with doubt, and uncertainty, and not knowing. we consider it's many some-more engaging to live not meaningful than to have answers that competence be wrong. spanRichard Feynman/span/p
    /div
   /div
   div class="fc-overlay fc-overlay-solid"/div
  /div!-- //fc-bottom --

  !-- front and behind of a flipping half --
  div class="fc-flip"

   div class="fc-front"

    div class="fc-inner"

     div class="fc-overlay fc-overlay-left"/div
     !-- left-most partial of hoop --
     div class="fc-handle fc-handle-in"div/div/div

     div class="fc-content"
      h3Free revelations/h3
      pby Codrops/p
     /div

    /div

   /div!-- //fc-front --

   div class="fc-back"

    div class="fc-inner"

     div class="fc-content"
      div class="feynman"
       span1918 – 1988/span
      /div
     /div

     div class="fc-overlay fc-overlay-right"/div

    /div

   /div!-- //fc-back --     

  /div!-- //fc-flip --     

 /div!-- //fc-perspective --

/div!-- //fc-wrapper --

So, basically, we will have a round left partial and a round right partial that will flip open once we click on a right-most partial of a handle.
Let’s character this whole thing.

The CSS

The categorical coupling will be 300 pixels high and far-reaching and we’ll core it on a page. For all of a round elements we will use a paper-like hardness picture that we’ll conceal on a credentials color, giving it a picturesque touch. The coupling will be made as a round given we give it a limit radius of 50%:

.fc-wrapper {
 width: 300px;
 height: 300px;
 position: relative;
 margin: 30px automobile 0;
 background: #846aa7 url(../images/paper.png) repeat core center;
 border-radius: 50%;
 box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

Let’s take a demeanour during a hoop pieces. All a pieces will have a fc-handle category in common:

.fc-handle {
 position: absolute;
 top: 50%;
 right: 0px;
 width: 80px;
 height: 30px;
 margin-top: -15px;
 background: 
 box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

The subsequent category will conclude a position for a core part:

.fc-handle-out {
 right: -65px;
 width: 65px;
}

fc-handle-in is a left many part:

.fc-handle-in {
 right: 80px;
}

The core groups of a dual hoop pieces that are on tip of a round will offer as shadows. When we “pull” a hoop from a right, a shade dropping on a round will need to demeanour like a triangle that gets taller. We will use dual rotated divs with a erratic gradient, simulating accurately that:

.fc-handle div {
 position: absolute;
 height: 0px;
 width: 80px;
 top: 30px;
 content: '';
 opacity: 0.3;
}

.fc-handle-in div {
 background: 
  linear-gradient(
   75deg, 
   rgba(0,0,0,0) 0%,
   rgba(0,0,0,0) 73%,
   rgba(0,0,0,0.65) 100%
  );
}

.fc-handle-out div {
 background: 
  linear-gradient(
   170deg, 
   rgba(0,0,0,0.65) 0%,
   rgba(0,0,0,0) 27%,
   rgba(0,0,0,0) 100%
  );
}

The following pseudo-element will be used to emanate an inset shade outcome on a core piece:

.fc-handle-out::after {
 position: absolute;
 right: 0px;
 width: 4px;
 height: 31px;
 content: '';
 background: 
  linear-gradient(
   to right, 
   rgba(0,0,0,0) 0%,
   rgba(0,0,0,0.15) 100%
  );
}

The right-most piece, i.e. a one that will trigger a opening of a round pamphlet when clicked, will be positioned outward of a round shape:

.fc-handle-pull {
 right: auto;
 left: 100%;
 margin-left: 5px;
 width: 30px;
 box-shadow: 
  1px 0 1px rgba(0,0,0,0.1), 
  inset 3px 0 2px rgba(0,0,0,0.2);
 cursor: pointer;
}

Let’s give it some abyss with a assistance of a gradient:

.fc-handle-pull::after {
 content: '';
 position: absolute;
 top: 0px;
 right: 0px;
 width: 30px;
 height: 100%;
 background: 
  linear-gradient(
   to right, 
   rgba(0,0,0,0) 0%,
   rgba(0,0,0,0) 69%,
   rgba(0,0,0,0.08) 100%
  );
}

The bottom partial that will enclose a quote calm will have a following style:

.fc-bottom {
 width: 220px;
 height: 100%;
 overflow: hidden;
 position: absolute;
 opacity: 0;
}

We are environment a opacity to 0 given we don’t wish it to means angled edges of a round when it’s closed. There will be an conceal extinguishing this partial so will notice it if we don’t “hide” it. Note, that we are environment a crawl to hidden. This will make a multiplication with a following category be cut off on a right:

.fc-bottom-bg {
 background: #846aa7 url(../images/paper.png) repeat core center;
 border-radius: 50%;
 width: 300px;
 height: 100%;
}

Now, let’s take a demeanour during a overlays that will assistance us with a picturesque look. Let’s initial conclude a common character for all of them:

.fc-overlay {
 top: 0px;
 left: 0px;
 width: 300px;
 height: 100%;
 position: absolute;
 border-radius: 50%; 
}

The plain conceal will simply be a semi-transparent black division. This one will be used to make a partial demeanour dim primarily (like a bottom content). When opening a circle, we will reduce a opacity turn in sequence to blur it out (the “open” states will be shown in a end):

.fc-overlay-solid {
 background: rgba(0,0,0,0.6);
}

The subsequent conceal will do a opposite: it won’t be manifest primarily yet afterwards we will use it to dim things once we open a booklet:

.fc-overlay-reverse {
 background: rgba(0,0,0,0);
}

That conceal will be used for a right partial of a round that will get lonesome by a opening bit.
The subsequent dual overlays will have semi-transparent gradients that we will control regulating opacity:

.fc-overlay-left {
 background: linear-gradient(to right, pure 27%, rgba(0,0,0,0.30) 80%);
 opacity: 0.5; 
}

.fc-overlay-right {
 background: linear-gradient(to left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.30) 100%);
 opacity: 0.5;
}

The left conceal will be used on a front partial and a right conceal on a behind part. Both will transition to an opacity of 1 once a pamphlet opens.
The viewpoint enclosure will, of course, have perspective, and we will make it a bit narrower. The thought is to cut off a round groups that we’ll have inside:

.fc-perspective {
 width: 220px;
 height: 300px;
 position: relative;
 perspective: 1000px;
}

The flip enclosure will be rotated to open a whole thing, divulgence a behind part. To flip in a right place, we need to set a transform-origin to where a conceal is, that is during 220 pixel:

.fc-flip {
 width: 100%;
 height: 100%;
 position: absolute;
 transform-origin: 220px 0px;
}

The behind and a front multiplication will have a following common style:

.fc-flip  div {
 display: block;
 height: 100%;
 width: 100%;
 margin: 0;
 overflow: hidden;
 position: absolute;
}

Their breadth will be 220px and given a crawl is set to hidden, a round shapes of a core divs will be cut off.
The behind partial will be rotated -180 degrees in 3D (on a Y-axis):

.fc-flip .fc-back {
 transform: rotate3d(0,1,0,-180deg);
}

Note, that we are not defining a required 3D properties here given we don’t wish to repeat it for each class. We will accumulate all a particular category and conclude those properties later, during once.
The core tools will have a round figure and we’ll give them a paper texture:

.fc-flip .fc-inner {
 border-radius: 50%;
 width: 300px;
 height: 100%;
 position: absolute;
 background: #846aa7 url(../images/paper.png) repeat tip right;
} 

.fc-flip .fc-back .fc-inner {
 margin-left: -80px;
 background-color: 
 box-shadow: inset 2px 0 3px rgba(0,0,0,0.1);
}

The behind calm will need to be “pulled” to a left so that a round is cut off on a left side and not on a right like a one of a front part.
Now, let’s character a calm elements:

.fc-content {
 width: 220px;
 padding: 20px;
 text-align: right;
 position: relative;
 height: 100%;
}

.fc-back .fc-content {
 margin-left: 80px;
}

.fc-bottom-bg .fc-content {
 padding-top: 40px;
}

.fc-content p {
 font-size: 12px;
 line-height: 22px;
 font-family: "Montserrat", sans-serif;
 text-shadow: 0 -1px 1px rgba(255,255,255,0.1);
 color: 
 padding: 0 0 0 31px;
}

.fc-flip .fc-front h3,
.fc-flip .fc-front p {
 position: absolute;
 text-align: right;
 width: 180px;
 text-shadow: 0 -1px 1px rgba(255,255,255,0.1);
 color: 
}

.fc-flip .fc-front h3,
.feynman camber {
 font-family: "Montserrat", sans-serif;
 text-transform: uppercase;
 font-size: 17px;
 letter-spacing: 1px;
 font-weight: normal;
}

.fc-flip .fc-front h3 {
 top: 30px;
 left: 15px;
}

.feynman {
 width: 255px;
 height: 255px;
 position: absolute;
 overflow: hidden;
 top: 50%;
 left: -55px;
 border-radius: 50%;
 box-shadow: 2px 0 3px rgba(0,0,0,0.3);
 margin-top: -127px;
 background: pure url(../images/feynman.png) no-repeat core right;
}

.feynman camber {
 text-align: center;
 width: 100px;
 height: 5px;
 line-height: 30px;
 color: 
 text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
 bottom: 40px;
 right: 80px;
 font-size: 13px;
 position: absolute;
}

.fc-flip .fc-front h3 span{
 font-size: 40px;
}

.fc-flip .fc-front p,
.fc-bottom-bg .fc-content camber {
 bottom: 50px;
 left: 15px;
 font-family: "Dancing Script", Georgia, serif;
 font-weight: 700;
 font-size: 22px;
}

.fc-bottom-bg .fc-content camber {
 font-size: 18px;
 display: block;
 color: 
 padding: 10px;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
 transform: rotate(-3deg);
}

Let’s accumulate all a classes that will have a transition:

.fc-flip .fc-back .fc-inner,
.fc-overlay,
.fc-handle,
.fc-handle div,
.fc-flip,
.fc-bottom{
 transition: all 0.6s ease-in-out;
}

.fc-bottom{
 transition-delay: 0.6s;
}

The subsequent properties are critical for creation a 3D revolution work properly:

.fc-flip,
.fc-flip .fc-inner,
.fc-handle {
 transform-style: preserve-3d;
}

.fc-flip  div,
.fc-flip .fc-inner,
.fc-flip .fc-front h3,
.fc-handle,
.fc-handle div,
.fc-overlay,
.fc-flip .fc-front p,
.fc-flip .fc-front camber {
 backface-visibility: hidden;
}

When we open a round pamphlet we will request a category fc-wrapper-open to a categorical wrapper. Let’s conclude a “open” states for all a elements.
The left-most square of a hoop will cringe to a breadth of 0. If we watch a paper outcome in a video, we will notice that it gets pulled to a right, yet a slit:

.fc-wrapper.fc-wrapper-open .fc-handle-in {
 width: 0px;
}

The erratic gradients that will offer as a shade for a dual hoop pieces will turn taller:

.fc-wrapper.fc-wrapper-open .fc-handle-in div {
 height: 180px;
}

.fc-wrapper.fc-wrapper-open .fc-handle-out div {
 height: 100px;
}

The credentials tone of a dual initial hoop pieces will turn darker:

.fc-wrapper.fc-wrapper-open .fc-handle {
 background-color: 
}

The right-most hoop will get wider given we are simulating a pulling of a whole handle:

.fc-wrapper.fc-wrapper-open .fc-handle-pull {
 width: 155px;
 background:  
}

The credentials tone of a behind partial calm will turn lighter:

.fc-wrapper.fc-wrapper-open  .fc-flip .fc-back .fc-inner { 
 background-color: 
}

The overlays will boost in opacity:

.fc-wrapper.fc-wrapper-open .fc-overlay {
 opacity: 1;
}

The plain conceal will blur out:

.fc-wrapper.fc-wrapper-open .fc-overlay-solid {
 background: rgba(0,0,0,0);
}

And a retreat conceal will turn darker:

.fc-wrapper.fc-wrapper-open .fc-overlay-reverse {
 background: rgba(0,0,0,0.4);
}

The bottom partial will turn manifest immediately (we mislay a transition here, yet when it closes it will fade):

.fc-wrapper.fc-wrapper-open .fc-bottom{
 opacity: 1;
 transition: none;

}

And of course, a many critical thing that is going to happen: a revolution of a flip container:

.fc-wrapper.fc-wrapper-open .fc-flip {
 transform: rotate3d(0,1,0,175deg);
}

And that’s all a style. Now, let’s take a demeanour during a few lines of JavaScript that will assistance us request a category and supplement some appropriate support for mobile.

The JavaScript

When we click on he right hoop piece, we will request a category fc-wrapper-open to a categorical container. We’ll conclude dual elementary functions for opening and closing. We’ll also supplement appropriate support regulating Hammer.js and the jQuery plugin:

$(function() {

 var $wrapper= $( '#fc-wrapper' ),
  $handle = $wrapper.children( 'div.fc-handle-pull' );

 $handle.on( 'click', function( eventuality ) {

  ( $handle.data( 'opened' ) ) ? close() : open();

 } );

 $wrapper.hammer().bind( 'dragend', function( eventuality ) {
  switch( event.direction ) {
   case 'right' : open(); break;
   case 'left'  : close(); break;
  }
 });

 function open() {
  $wrapper.addClass( 'fc-wrapper-open' );
  $handle.data( 'opened', loyal );
 }

 function close() {
  $wrapper.removeClass( 'fc-wrapper-open' );
  $handle.data( 'opened', fake );
 }

} );

That’s all, wish we suffer it and find it inspiring!