更新:
我设置了一个小提琴,它似乎工作良好-第一个幻灯片的部分包含一个谷歌地图-我不知道这是否真的是问题。。。
我最近在一个我正在开发的HTML5应用程序中添加了一个webkit转换卡翻转。这就产生了一个不幸的效果,使一个水平移动的简单旋转木马表现出一些奇怪的行为。
我的旋转木马是这样设计的

<div id="wrapper">
    <div id="sections">
        <section id="startPage" class="page">
            <div id="card">
                <div class="face front">
                    <p>Some content here</p>
                    <button id="flipFront">A label</button>
                </div>
                <div class="face back">
                    <p>Some content here</p>
                    <button id="flipBack">A label</button>
                </div>
            </div>
        </section>
        <section></section>
        <section></section>
    </div>
</div>

我的jQuery.click()行为循环如下:
$('#sections').stop().animate({"left": -($('#someDiv').position().left)}, 500);
在我为卡片翻页添加-webkit转换CSS之前,这绝对可以正常工作:
#startPage {
    -webkit-perspective: 1000;
}

#card {
    height: 940px;
    width: 640px;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.5s;
}

.back {
    -webkit-transform: rotateY(180deg);
    background-color:#000;
}

.rotated{
    -webkit-transform: rotateY(180deg);
}

.back, .front {
    height: 940px;
    width: 640px;
}

.face {position: absolute;-webkit-backface-visibility: hidden;}

现在我用的时候卡片翻起来很好
$('#setup, #back').click(function() {
    $('#card').toggleClass('rotated');
});

我的旋转木马仍然可以工作,但似乎卡住了——例如,它会部分滑出,并保持在原地,直到我以某种方式与div交互,然后它会卡入正确的位置。
问题似乎是
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

当我从CSS中删除它们时,carousel可以正常工作,但是翻转不能。
我在Safari和Chrome上都做过测试,结果是一样的。任何想法都会很感激的。

最佳答案

只有使用webkit转换才能搞乱它,添加更多信息,如

-webkit-transform: rotateY(180deg) scale(2);
-moz-transform: rotateY(180deg) scale(2);
-o-transform: rotateY(180deg) scale(2);
-ms-transform: rotateY(180deg) scale(2);

所以它被更多的浏览器支持,你有一个退路。
我已经多次看到这个问题,但我不能保证,因为我没有测试它与您的代码。

09-25 17:23