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做一切可能需要一些额外的魔力。

Jquery翻页脚本没有在翻转背面显示独特的内容

1 个答案: