Auto flipping text with css3 and javascript

We know since Html5 and Css3 arrived we can do lots of fun effect in our webpage. In css3 we have different animations and transition effects that's gives us an easiest ways to do webpage more interactive.

There is a property in css3 that is called as transform. There are two kind of transform 2d transform and 3d transform. In this post I am going to use 2d transform for Flip effect.

In this flip effect I want it to flip text panel automatically, which will have two different content on both sides front and back.

First of all we are going to build Html structure for it.



   <div id="flipPanel">
                              <h3 id="header1" class="face">Front text </h3>
                         
                              <h3 id="header2" class="face back" style="display:none;">Back text</h3>
                        </div>

I am using h3 for my text. You may try this with div also and do deterrent design.

We are making two sides of the panel here. So here am  using one main div which content two h3. Let's add css.


#flipPanel {
   -moz-transform-style: preserve-3d;
   -moz-transition: all 1s linear 0s;
    transform-style: preserve-3d;
    transition: all 1s linear 0s;
    -webkit-transform-style: preserve-3d;
   -webkit-transition: all 1s linear 0s;
   
    float: left;
   height: 18px;
    margin-top: 31px;
   width: 100%;
   position:relative;
   
}

.face {
   -moz-backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    margin:0;
    position:absolute;
  
}
.face.back {
   -moz-box-sizing: border-box;
   -moz-transform: rotateX(180deg);
   -webkit-box-sizing: border-box;
   -webkit-transform: rotateX(180deg);
   box-sizing: border-box;
   transform: rotateX(180deg);
   
}


This will build your basic structure. You can see only one text instead of both. Because we have flipped panel already and back side is hidden. But this will not play automatically.

For auto play we have to use Jquery part for it.

 <script src="../js/jquery-1.7.1.min.js" type="text/javascript"></script>

  <script type="text/javascript">
 Triggerh1 = 0;
          rotatAmnt = 180;
          var myVar = setInterval(function () { showH1() }, 5000);
          function showH1() {
              if (Triggerh1 == 0) {
                  Triggerh1 = 1;
                  $('#flipPanel h3').slideToggle(1000);
                  $('#flipPanel').attr('style', '-moz-transform: rotatex(' + rotatAmnt + 'deg);-webkit-transform: rotatex(' + rotatAmnt + 'deg)');
                  rotatAmnt = rotatAmnt + 180;
              } else {
                  Triggerh1 = 0;
                  $('#flipPanel h3').slideToggle(1000);
                  $('#flipPanel').attr('style', '-moz-transform: rotatex(' + rotatAmnt + 'deg);-webkit-transform: rotatex(' + rotatAmnt + 'deg)');
                  rotatAmnt = rotatAmnt + 180;

              };
          }

          </script>

You are done. Now run this page in browser.