Flexible 3D Flipping Cube Pluigin - HexaFlip

HexaFlip is an awesome javascript plugin that allows your user to flip the cube on drag with 3D animation effects. Good for animated 3D slider, Time Picker, slideshow and more.

How to use it:

1. Markup

<div class="main">
<div id="hexaflip-demo1" class="demo"></div>
<div id="hexaflip-demo2" class="demo"></div>
</div>

2. Include HexaFlip CSS in your html page

<link href="hexaflip.css" rel="stylesheet" type="text/css">

3. CSS for this example

.demo {
  margin: 0 auto;
  -webkit-filter: drop-shadow(30px 30px 23px rgba(0,0,0,0.3));
  -moz-filter: drop-shadow(30px 30px 23px rgba(0,0,0,0.3));
  filter: drop-shadow(30px 30px 23px rgba(0,0,0,0.3));
}
#hexaflip-demo1,
#hexaflip-demo2 {
  margin-bottom: 4rem;
}
#hexaflip-demo1 .hexaflip-cube,
#hexaflip-demo2 .hexaflip-cube {
  opacity: 0.9;
  filter: alpha(opacity=90);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}
#hexaflip-demo1 .hexaflip-cube .hexaflip-left,
#hexaflip-demo2 .hexaflip-cube .hexaflip-left,
#hexaflip-demo1 .hexaflip-cube .hexaflip-right,
#hexaflip-demo2 .hexaflip-cube .hexaflip-right {
  background-color: #222 !important;
}
#hexaflip-demo1 .hexaflip-cube > div,
#hexaflip-demo2 .hexaflip-cube > div {
  font-weight: 100;
  text-shadow: none;
}
#hexaflip-demo1 .hexaflip-cube > div:nth-child(1n+1),
#hexaflip-demo2 .hexaflip-cube > div:nth-child(1n+1) {
  background-color: #069ad5;
}
#hexaflip-demo1 .hexaflip-cube > div:nth-child(2n+2),
#hexaflip-demo2 .hexaflip-cube > div:nth-child(2n+2) {
  background-color: #fc5215;
}
#hexaflip-demo1 .hexaflip-cube > div:nth-child(3n+3),
#hexaflip-demo2 .hexaflip-cube > div:nth-child(3n+3) {
  background-color: #30b71d;
}
#hexaflip-demo1 .hexaflip-cube > div:nth-child(4n+4),
#hexaflip-demo2 .hexaflip-cube > div:nth-child(4n+4) {
  background-color: #eee;
  color: #222;
}
#hexaflip-demo2 {
  margin-bottom: 6rem;
}

4. Include HexaFlip Plugin in your web page

<script src="hexaflip.js"></script> 

5. Javascript

<script>
        var hexaDemo1,
            hexaDemo2,
            hexaDemo3,
            text1 = 'HEXA'.split(''),
            text2 = 'FLIP'.split(''),
            settings = {
                size: 150,
                margin: 12,
                fontSize: 100,
                perspective: 450
            },
            makeObject = function(a){
                var o = {};
                for(var i = 0, l = a.length; i < l; i++){
                    o['letter' + i] = a;
                }
                return o;
            },
            getSequence = function(a, reverse, random){
                var o = {}, p;
                for(var i = 0, l = a.length; i < l; i++){
                    if(reverse){
                        p = l - i - 1;
                    }else if(random){
                        p = Math.floor(Math.random() * l);
                    }else{
                        p = i;
                    }
                    o['letter' + i] = a[p];
                }
                return o;
            };
    
        document.addEventListener('DOMContentLoaded', function(){
            hexaDemo1 = new HexaFlip(document.getElementById('hexaflip-demo1'), makeObject(text1), settings);
            hexaDemo2 = new HexaFlip(document.getElementById('hexaflip-demo2'), makeObject(text2), settings);
            hexaDemo3 = new HexaFlip(document.getElementById('hexaflip-demo3'));
    
            setTimeout(function(){
                hexaDemo1.setValue(getSequence(text1, true));
                hexaDemo2.setValue(getSequence(text2, true));
            }, 0);
    
            setTimeout(function(){
                hexaDemo1.setValue(getSequence(text1));
                hexaDemo2.setValue(getSequence(text2));
            }, 1000);
    
            setTimeout(function(){
                setInterval(function(){
                    hexaDemo1.setValue(getSequence(text1, false, true));
                    hexaDemo2.setValue(getSequence(text2, false, true));
                }, 3000);
            }, 5000);
        }, false);
    
    </script>

More Examples:

• Default
• Time Picker
• Slideshow
• Visual Password Experiment

Change log:

• updated to v0.1.2 (2014-02-10)

---

This awesome jQuery plugin is developed by dmotz. For more Advanced Usages, please check the demo page or visit the official website.