CSS 3-D Flip

 By: Kumar Siddharth    08:50  3d, animation, css, css 3d flip, flip, hilreative, transformatinon, transition   No comments

How to flip div using CSS 3-D transformation and transitions without using jquery/javascript??

If you are looking for something like this you are at right place, this is kind of a tutorial to do CSS 3-D flip.Okay lets get started with our HTML code.

Demo

<section class="container" >
    <div id="card">
       <figure class="front"></figure>
       <figure class="back face"></figure>
   </div>
</section>

Figure: Defines self-contained content, like illustrations, diagrams, photos, code listings, etc.

 Now lets start styling our HTML in CSS.

.container {
      width: 259px;
      height: 350px;
      position: relative;
      margin: 10px auto 40px;
      -webkit-perspective: 800px;
          -moz-perspective: 800px;
              -o-perspective: 800px;
                   perspective: 800px;
} 

To activate 3-D space, an element needs perspective. The value of perspective determines the intensity of the 3-D effect. Think of it as a distance from the viewer to the object. The greater the value, the further the distance, so the less intense the visual effect.perspective: 2000; yields a subtle 3-D effect, as if we were viewing an object from far away.perspective: 100; produces a tremendous 3-D effect, like a tiny insect viewing a massive object. 

#card {
      width: 100%;
      height: 100%;
      position: absolute;
     -webkit-transition: -webkit-transform 1s;
         -moz-transition: -moz-transform 1s;
             -o-transition: -o-transform 1s;
                 transition: transform 1s;
    -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
                transform-style: preserve-3d;
     background:none;   }

Height and width are 100% to make sure that #card covers whole of its parent element(.container).

Position is absolute to remove it from natural flow DOM , it will be positioned to its relatively positioned parent element(.container).

Background:none is ensuring that when our card is flipping there is nothing behind it!

Note: Here we have given perspective to parent element and it is the correct way to do this,if we would have given perspective to each child element it would not have been giving the desired result.

So,to inherit the perspective in child elements preserve-3d is used.

It is recommended to use perspective with parent element. 

 #card figure {
      display: block;
      height: 100%;
      width: 100%;
     position: absolute;
     border-radius:10px;
     -webkit-backface-visibility: hidden;
         -moz-backface-visibility: hidden;
              -o-backface-visibility: hidden;
                  backface-visibility: hidden;
      } 

Backface-visibility is hidden to hide the back of flipped div. 

#card .front {
 background: red;
 background:url("https://googledrive.com/host/0B7xKAUydVtQQdHlXY0xaNmM0c2c/4adbad8836129944.jpg");
 background-size:cover;
}

#card .back {
 background: blue;
 background:url("https://3d448791b95c609754b6a549c0a2a7058e411e6f.googledrive.com/host/0B7xKAUydVtQQdHlXY0xaNmM0c2c/The_Joker_Playing_Card_by_reignoffire86.jpg");
-webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
         -o-transform: rotateY( 180deg );
              transform: rotateY( 180deg );
  } 

Initially back div is rotated 180 degree and will not be visible as backface-visibility is hidden.

Finally adding the core functionality that will do the thing.

.container:hover #card{
     -webkit-transform:rotateY(180deg);
    } 

Wanna ask/say something, comment down here!