3D翻牌子（兼容IE8）

<div class="sohulist clearfjx">
        <span class="sohuItem" style="margin-left: 0px;">
            <a href="/huisuan/static/showsource?type=app" class="shnews">搜狐新闻</a>
        </span>
        <span class="sohuItem">
            <a href="/huisuan/static/showsource?type=app" class="shiphoe">手机搜狐网</a>
        </span>
        <span class="sohuItem">
            <a href="/huisuan/static/showsource?type=video" class="shvido">搜狐视频</a>
        </span>
        <span class="sohuItem" style="margin-right: 0px;margin-left: 24px;">
            <a href="/huisuan/static/showsource?type=pc" class="shmh">搜狐门户</a>
        </span>
    </div>

var supportsCSS = !!((window.CSS && window.CSS.supports) || false),supports3d = false;
        if(supportsCSS){
            supports3d = CSS.supports("(transform-style: preserve-3d) or (-moz-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d)");
        }
        var sysObj = (function () {
            var Sys = {};
            var ua = navigator.userAgent.toLowerCase();
            var s;
            (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? Sys.ie = s[1] :
                (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
                    (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
                        (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
                            (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
                                (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
            return Sys;
        })();
        $(‘.sohulist .sohuItem‘).on(‘mouseenter‘,function(){
            $(this).data(‘mouseenter‘,true).addClass(‘hover‘);
            if(!supports3d&&!sysObj.ie||!!sysObj.ie&&parseInt(sysObj.ie)<10){
                $(this).addClass(‘fix‘);
            }
        });
        $(‘.sohulist .sohuItem‘).on(‘mouseleave‘,function(){
            $(this).removeClass(‘hover fix‘);
        });
        $(‘.sohulist .sohuItem‘).on(‘transitionend webkitTransitionEnd oTransitionEnd‘, function () {
            if(!!sysObj.ie&&$(this).data(‘mouseenter‘)){
                $(this).removeClass(‘fix‘);
                $(this).data(‘mouseenter‘,false);
            }
        });

.sohulist{margin-bottom:80px;}
.sohulist .sohuItem{float:left;width:204px;height:205px;margin:0 32px;border-radius:102px;}
.sohulist a{display:block;width:204px;height:205px;border-radius:102px;background:url(../images/listbg.png) no-repeat 0 0;text-indent:-99999px;position:relative;transition:0.8s;transform-style:preserve-3d;overflow:hidden;}
.sohulist .shnews{}
.sohulist .shiphoe{background-position:-265px 0;}
.sohulist .shvido{background-position:-532px 0;}
.sohulist .shmh{background-position:-797px 0;}
.sohulist .sohuItem.hover a{transform:rotateY(180deg);-webkit-transform:rotateY(180deg);   /* Safari Chrome */-moz-transform:rotateY(180deg);/* Firefox */display:block;width:204px;height:205px;}
.sohulist .sohuItem.hover .shnews{background:url(../images/list2bg.png) no-repeat 0 0;}
.sohulist .sohuItem.hover .shiphoe{background:url(../images/list2bg.png) no-repeat -265px 0;}
.sohulist .sohuItem.hover .shvido{background:url(../images/list2bg.png) no-repeat -532px 0;}
.sohulist .sohuItem.hover .shmh{background:url(../images/list2bg.png) no-repeat -797px 0;}
.sohulist .sohuItem.hover.fix .shnews{background:url(../images/list2bg_IE.png) no-repeat -8px 0;}
.sohulist .sohuItem.hover.fix .shiphoe{background:url(../images/list2bg_IE.png) no-repeat -268px 0;}
.sohulist .sohuItem.hover.fix .shvido{background:url(../images/list2bg_IE.png) no-repeat -529px 0;}
.sohulist .sohuItem.hover.fix .shmh{background:url(../images/list2bg_IE.png) no-repeat -790px 0;}