基于css3翻牌效果

<div class="map_block float_l lineItem">
        <a href="javascript:;" class="flipper">
            <div class="Itemfront f4">
                  <div class="map_count_bg float_l people_green_map">男性<br />人口</div>
                  <div id="nxrknl" class="map_text_green float_l "></div>
              </div>
              <div class="Itemback b4">
                       <div class="map_count_bg float_l people_green_map">男性<br />人口</div>
                  <div id="nxrknl" class="map_text_green float_l "></div>
                </div>
          </a>
    </div>    
    

/*css3 动画*/

.lineItem{
    perspective: 1000;
    -webkit-perspective: 1000px; /*父类容器中 perspective 子类允许透视*/
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px;
}
.lineItem:hover .Itemfront, .hover .Itemfront {transform: rotateY(180deg);-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);-ms-transform: rotateY(180deg);-o-transform: rotateY(180deg); z-index:1;}
.lineItem:hover .Itemback, .hover .Itemback { transform: rotateY(0deg); -webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg); z-index:2;}


.flipper {transition:transform 0.6s ease-out;
transition: transform .5s ease-in-out;
-webkit-transition: transform .5s ease-in-out;
-moz-transition: transform .5s ease-in-out;
-ms-transition: transform .5s ease-in-out;
-o-transition: transform .5s ease-in-out;
-webkit-transform-style: preserve-3d; /*使其子类变换后得以保留 3d转换后的位置*/
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
display:block;position: relative;}

.Itemfront, .Itemback {backface-visibility: hidden;transition: 0.6s ease-out;-webkit-transition: .6s ease-out; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;transform-style: preserve-3d;position: absolute;top: 0;left: 0;}
.Itemfront {z-index: 2;transform: rotateY(0deg);transform: rotateY(0deg); -webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);}
.Itemback { z-index:1;transform: rotateY(-180deg);transform: rotateY(-180deg);-webkit-transform: rotateY(-180deg);-moz-transform: rotateY(-180deg);-ms-transform: rotateY(-180deg);-o-transform: rotateY(-180deg);}
/*翻转效果样式 End*/

setInterval(function(){
                var iRandom = getRandom(0,4);
                $('.lineItem').eq(iRandom).addClass('hover');
                setTimeout(function(){
                    $('.lineItem').eq(iRandom).removeClass('hover');
                }, 3000);
                
            }, 6000);
            function getRandom(min, max){
                var _max = max || min;
                var _min = max ? min : 0;
                return parseInt(Math.random() * (_max - _min+1) + _min);
            }

转载于:https://www.cnblogs.com/junwu/p/5703330.html