Question

我想知道如何使用此flip plugin使3d翻转过渡与IE9（客户端请求）兼容。我可以使它工作，但我有两个pngs，我想鼠标悬停从rollover1.png切换到rollover2.png。到目前为止它确实是rollover1.png

  <!DOCTYPE html>
    <html>
    <style type="text/css">
    .flipbox {
    width: 108px;
    height: 108px;
    line-height: 108px;
    background-color: #ff9000;
    font-family: 'ChunkFive Regular', Tahoma, Helvetica;
    font-size: 2.5em;
    color: #ffffff;
    text-align: center;
    }   

    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <script src="jquery.flip.min.js"></script>

    <body>

    <div class="flipbox">
        <img src="rollover1.png" alt="Unlock Your Potential"/>
        <img src="rollover2.png" alt="jjjj"/>
    </div>

    <div class="flipPad">

    <a href="#" class="top" rel="bt" rev="#B0EB17" title="Ohhh yeah!">

    </a>
    </div>

    </body>
    <script>

    $(function(){
        $('.flipbox').hover(function(){
        $('.flipbox').flip({
            direction:'tb'
            });
        });
    });

    </script>
    </html>

Answer 1

以下网站有关于如何在悬停上实现翻转效果的良好演示：

http://line25.com/wp-content/uploads/2010/webkit-flip/demo/index.html

http://blog.mgechev.com/2013/05/04/css3-flipping-effect/

HTML：

<div class="panel">
    <div class="front card">
    </div>
    <div class="back card">  
    </div>
</div>

CSS：

.panel {
    width: 300px;
    height: 300px;
    margin: auto;
    position: relative;
}

.card {
    width: 100%;
    height: 100%;
    -o-transition: all .5s;
    -ms-transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
}

.front {
    z-index: 2;
    background-image: url(http://img.afreecodec.com/images/v3/wp-content/uploads/2011/05/00_chrome_icon.jpg);
}

.back {
    z-index: 1;
    -webkit-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);  
    transform: rotateX(-180deg);  
    background-image: url(http://www.digitaltrends.com/wp-content/uploads/2011/03/ie-9-icon.jpg);
}

.panel:hover .front {
    z-index: 1;
    -webkit-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

.panel:hover .back {
    z-index: 2;   
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

JSFiddle示例： http://jsfiddle.net/mgechev/GpK25/16/

使用JS：

http://jsfiddle.net/mornaistar/eHfUa/

http://jsfiddle.net/azizpunjani/JfUbW/

如何使用翻转插件在悬停时切换图像

1 个答案: