基于WebKit的翻牌效果

浏览数：16 / 时间：2015年06月09日

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.base{
   position:absolute;left:0px;top:0px;width:440px;height:330px;
}
.container{
  overflow:visible;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  perspective: 500;
  -webkit-perspective: 500;
}
.back{
  background:url(Stage_01.png);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:rotateY(0deg);
  -webkit-transform:rotateY(0deg);
}
.front{
 background:url(Stage_02.png);
 backface-visibility:hidden;
 -webkit-backface-visibility:hidden;
 transform:rotateY(180deg);
 -webkit-transform:rotateY(180deg);
 transform-origin:center center;
 -webkit-transform-origin:center center;
}
.containerRotate{
  transition: all 1.5s;
  transform:rotateY(180deg) translateZ(-50px);
  -webkit-transform:rotateY(180deg) translateZ(-50px);
  transform-origin:center center;
  -webkit-transform-origin:center center;
}
.containerRotateEnd{
  transition: all 0.5s;
  transform:rotateY(180deg) translateZ(0px);
  -webkit-transform:rotateY(180deg) translateZ(0px);
  transform-origin:center center;
  -webkit-transform-origin:center center;
}
</style>
</head>
<body>
  <div id=‘container‘ 
class="base container">
    <div id=‘frontLbl‘ 
class="base front"></div>
    <div id=‘backLbl‘  
class="base back"></div>
  </div>
</body>
<script type="text/javascript">
  function 
whichTransitionEvent(){
    var 
t;
    var 
el = document.createElement(‘fakeelement‘);
    var 
transitions = {
      ‘transition‘:‘transitionend‘,
      ‘OTransition‘:‘oTransitionEnd‘,
      ‘MozTransition‘:‘transitionend‘,
      ‘WebkitTransition‘:‘webkitTransitionEnd‘,
      ‘MsTransition‘:‘msTransitionEnd‘
    }
 
    for(t in 
transitions){
        if( el.style[t] !== undefined ){
            return 
transitions[t];
        }
    }
}
 
/* 监听 transition! */
var 
transitionEvent = whichTransitionEvent();
var 
_container = document.getElementById(‘container‘);
transitionEvent && _container.addEventListener(transitionEvent, function(e) {
    var 
_self = this;
    setTimeout(function(){
      _self.className="base container containerRotateEnd";
    },2000)
});
_container.addEventListener(‘click‘,function(e){
  var 
_self = this;
  this.className="base container containerRotate";
  })
</script>
</html>