Question

更新：我设置了一个小提琴，似乎工作正常 - 首先插入的部分包含一个谷歌地图 - 我想知道这是否真的是问题......

我最近添加了一个-webkit-transform card flip到我正在处理的HTML5应用程序。这有一个令人遗憾的结果是制作一个水平移动的简单旋转木马会表现出一些奇怪的行为。

我的旋转木马结构如下

<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-transform 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中删除它们时，旋转木马工作正常，但翻转没有。

我在Safari和Chrome上都进行了测试，结果是一样的。任何想法都将不胜感激。

Answer 1

只有使用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);

所以它受到更多浏览器的支持而且你有一个后备。我已经多次看到这个问题了，但我不能保证它，因为我没有用你的代码测试它。

Answer 2

transform属性不适用于jquery中的animate（）函数，因为animate（）函数只接受本质上为数字的值。例如。数字（例如＆＃34;保证金：30px＆＃34;）。

transform属性采用非数字值。

参考： http://www.w3schools.com/jquery/eff_animate.asp

但是，您可以使用＆＃34;步骤功能＆＃34; 来实现动画的转换效果或使用Transit插件。 http://ricostacruz.com/jquery.transit/

希望这有帮助。

-webkit转换和jQuery .animate（）之间的冲突

2 个答案: