0

我想知道如何使用这个翻转插件来使 3d 翻转过渡与 IE9 兼容（客户端请求）。我可以让它工作，但我有两个 png，我想在鼠标悬停时从 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>
4

1 回答 1

2

以下站点有很好的演示如何在悬停时实现翻转效果：

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/

于 2013-10-17T04:48:35.450 回答