Table flips

by sanford

HTML

<table><thead></thead><tbody><tr><td class="">One</td><td class=""><DIV class="flipcontainer"><span class="sideA">...</span><span class="sideB"></span></div></td><td class="">Three</td></tr><tr><td  class="">One</td><td class=""><span class="">Two</span><span class="">Four</span></td><td class=""><DIV class="flipcontainer"><span class="sideA">1000</span><span class="sideB"></span></div></td></tr></tbody></table>

CSS

BODY {
    /* font:24px/24px Georgia; */
    font:24px/24px Verdana;
    padding:40px;
}
TD {
    -webkit-perspective: 250px;
    perspective:250px;
}
TABLE,TR {
    ZZbackground-color: pink;
    border-collapse:separate;
    border-spacing:5px;
}
TD {
    border:1px solid grey;
    padding:1px;
    width:200px;
    height:100px;
}

.flipcontainer {
    position:relative;
}

.flipcontainer, .flipcontainer SPAN {
    transition: -webkit-transform 700ms ease-out;
    transition: -moz-transform 700ms ease-out;
    transition: transform 700ms ease-out;    
}
.flipcontainer {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style:preserve-3d;
}
.flipcontainer {
    width:200px;
    height:200px;
    text-align: center;
    background-color:transparent;
    
    /* disabling the filter seems to help default view, and it will still play! */
    -ms-filter: "progid:DXImageTransform.Microsoft.Fade(enabled=false,duration=0.500,overlap=.7,center=true)";
}
.flipcontainer span {
    line-height:200px;
    display:block;
    height:2em;

    -webkit-backface-visibility: hidden;    
    -moz-backface-visibility: hidden;    
    backface-visibility: hidden;   
}
.flipcontainer span.sideB {
   margin-top: -2em;

    -webkit-transform: rotateY(180deg);        
    -moz-transform: rotateY(180deg);        
    transform: rotateY(180deg);  
}
span.boldit{
   font-weight:bold;
   color: fuchsia;
}
.flipcontainer.skipFlip {
    outline: gold solid 6px;
}

JavaScript

console = window.console || { log: function(){} }; 

(function(){
    $$('.flipcontainer').setAndFlip(
    {
        text: parseInt( Math.random()*1000)
    }
    , 'Y'
    , false
    );
}).delay(2000);

(function(){
    $$('.flipcontainer').setAndFlip(
    {
          text: parseInt( Math.random()*1000)
        , classes: {
            add: 'boldit'
            , remove: ''
        }
    }
    , 'Y'
    , false
    );
}).delay(6000);


(function(){
    $$('.flipcontainer').setAndFlip(
    {
          text: parseInt( Math.random()*1000)
        , classes: {
              add: ''
            , remove: 'boldit'
        }
    }
    , 'Y'
    , false
    );
}).delay(10000);



Element.canSetStyles = {};
Element.implement({
    canSetStyle:
    function( alias, testStyleName, testStyleValue ) {
        if ( alias in Element.canSetStyles ) {
            return Element.canSetStyles[alias];
        } else if ( !testStyleName ) {
            return false;
        } else {
            return ( Element.canSetStyles[alias] = 
                    ( 
                        testStyleValue ==  this.setStyle( testStyleName, testStyleValue )
                                             .getStyle( testStyleName ) 
                    ) 
                   );
        }
    }
});

Element.implement({
    setAndFlip:
    function( attrs, plane, alwaysFlip ) {
    var self=this;
    var savedRotate, components, deg;
    var contentChanged = false;
    var sideA, sideB, oldSideEl, newSideEl;
    var halfRotate, fullRotate;
    var flipMode
        , FLIP_MODE_SWITCH = 1
        , FLIP_MODE_SWITCH_FILTER = 2
        , FLIP_MODE_SWITCH_CLASS= 4 // TBD
        , FLIP_MODE_TRANSFORM = 8
        , FLIP_MODE_TRANSFORM_PRESERVE = 16
        , FLIP_MODE_TRANSFORM_FLAT = 32;
      
    // data- attrs automatically get lcased (by Moo?) so let's be explicit
    savedRotate = self.get( 'data-last-transform-rotate'+plane.toLowerCase() ) 
        || 'rotateY(0deg)'; 

    components =...