Flipping an ExtJS Panel with CSS3

For a fun little blog post I thought it would be interesting to convert a ‘Flipping’ animation jQuery example I had found online into the context of ExtJS and Panels. (see below for the link)

This example uses CSS3 and in particular uses the webkit-transform declaration in CSS to provide a smooth flipping effect from one panel to another panel.

Click here for a live demo of this in action (Chrome or Safari only)

 

To set this up, I used a simple structure in my index.html file like this:

/index.html

...
 <div class='flip'>
        <div class='card'>
            <div id = 'front' class = 'face front'>
            </div>   
            <div id = 'back' class = 'face back'>
            </div>   
        </div>
   </div>
...

Then setup a very rudimentary ExtJS application to put two Panels into their corresponding divs:

/fliptest.js

Ext.onReady(function() {

    Ext.create('Ext.panel.Panel', {
        id: 'frontcard',
        height: 300,
        bodyStyle: {
            "background-color": "purple"
        },
        html: '<h1>Front</h1>',
        renderTo: 'front',
        listeners: {
            'render': function(panel) {
                panel.body.on('click', function() {
                    var cardq = Ext.select('.card');
                    cardq.each(frontflipCard);
                });
            }
        }
    });
    Ext.create('Ext.panel.Panel', {
        id: 'backcard',
        height: 300,
        bodyStyle: {
            "background-color": "blue"
        },
        html: '<h1>Back</h1>',
        renderTo: 'back',
        listeners: {
            'render': function(panel) {
                panel.body.on('click', function() {
                    var cardq = Ext.select('.card');
                    cardq.each(backflipCard);
                });
            }
        }
    });


    function frontflipCard(el, c, index) {
        el.addCls('flipped');
    }

    function backflipCard(el, c, index) {
        el.removeCls('flipped');
    }
   


});

You can see I added some click handlers to the panels which fire the appropriate flip function. I used the Ext.select function to select the card div and either added or removed the ‘flipped’ class which in turn causes the CSS transformation to occur. So in this case the real magic happens entirely in CSS.

/flip.css

body {
 background: #ccc;
}
.flip {
  -webkit-perspective: 800;
   width: 300px;
   height: 200px;
    position: relative;
    margin: 50px auto;
}
.flip .card.flipped {
  -webkit-transform: rotatex(-180deg);
}
.flip .card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
}
.flip .card .face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden ;
  z-index: 2;
  font-family: 'Open Sans', sans-serif;
  font-size: 3em;
  text-align: center;
  line-height: 200px;

}
.flip .card .front {
  position: absolute;
  z-index: 1;
}
.flip .card .back {
  -webkit-transform: rotatex(-180deg);
}
h1{
	color: white;
}

The initial back card is already transformed -180degrees and set to a lower z-level then the front card. Once the flipped class is added to the cards, both fire the same transformation and voila! tour panels flip over!

Unfortunately I only did this example using webkit, so the demo will only work if you are using Safari or Chrome as a browser. If you are using one of these browsers:

Click here for a live demo of this in action (Chrome or Safari only)

 

Shameless plug: Always available to help your team or project:

As always, if you need help with your project, feel free to contact me.

We currently have resources available to help your project using a wide variety of server side technologies and stacks including PHP, Ruby on Rails, Java EE, .NET and node.js. Contact us and see how we can help increase your development velocity!

Looking forward to hearing from you!

Contact

Connect with me on LinkedIn

our Direct Contact Info
and finally our Sencha Devs profile

Source

The source for this example is available if you are having some trouble following along. Connect with me or send me a note and I’ll send you the source.

Resources

JSFiddle with jQuery Example

Google+