php - Jquery 翻盖脚本未在翻盖背面显示独特内容

Question

我正在尝试实现 Rotate3Di，可在此处找到:http://www.zachstronaut.com/projects/rotate3di/

我可以让我的图像翻转，但背面只显示正面的镜像，而不是我从数据库中提取的独特内容。提前感谢您的帮助。

<script type="text/javascript" language="javascript" charset="utf-8">
$(document).ready(function () {
    $('#movienav li div.back').hide().css('left', 0);

    function mySideChange(front) {
        if (front) {
            $(this).parent().find('div.front').show();
            $(this).parent().find('div.back').hide();

        } else {
            $(this).parent().find('div.front').hide();
            $(this).parent().find('div.back').show();
        }
    }

    $('#movienav li').hover(
        function () {
            $(this).find('div').stop().rotate3Di('flip', 180, 1000, {direction: 'clockwise', sideChange: mySideChange});
        },
        function () {
            $(this).find('div').stop().rotate3Di('unflip', 1000, {sideChange: mySideChange});
        }
    );
});
</script>

HTML

<div id="movienav">
<ul>
<li><div class="front"><img src="<?php echo $imglink; ?>" width="340" height="450" class="dvdcover" /></div>
<div class="back">
<?php echo $description; ?>
</div>
</li>
</ul>
</div>

CSS

#movienav {
    height: 450px;
    width:75%; 
    float:left;
    margin-top:25px; 
    clear:left;
    padding-bottom: 45px;
}

#movienav li {
    width: 340px;
    height: 450px;
    float: left;
    margin-right: 10px;
    position: relative;
    display:inline;
    list-style:none;
}

#movienav li div {
    width: 340px;
    height: 450px;
    overflow: hidden;
    background: #161616;
    position: absolute;
    top: 0;
    left: 0;
}

#movienav li div.back {
    left: -999em;
    padding-bottom: 15px;  
    background-color:#161616; /*max-height:450px; overflow:auto;*/
    margin-top: 0;

}

已解决

将以上行更改为:

$('#movienav li').hover(
    function () {
        $(this).find('div').stop().rotate3Di('180', 400, {direction: 'clockwise', sideChange: mySideChange});
    },
    function () {
        $(this).find('div').stop().rotate3Di('unflip', 400, {sideChange: mySideChange});
    }
);

Answer 1

http://davidwalsh.name/css-flip

我想你想要backface-visibility: hidden;

老实说，我只通过 CSS 而不是使用 javascript 完成了此操作，但一开始我遇到了同样的问题，直到我设置了 backface-visibility。通过 javascript 做所有事情可能需要一些额外的魔法。