Jquery 3d卡翻转动画耗时太长

我有一个3d卡翻转动画点击，但它需要太长的时间来触发，我不知道为什么

请参见此处的示例（向下滚动并单击任何黑白图片）

这是我的密码：

CSS

.flip-container {
-webkit-perspective: 1000;
            -moz-perspective: 1000;
            perspective: 1000;

            border: 0px solid #ccc;
        }


            .flip-container:hover .flipper, .flip-container.hover .flipper, #flip-toggle.flip .flipper {
                -webkit-transform: rotateY(180deg);
                -moz-transform: rotateY(180deg);
                transform: rotateY(180deg);
                filter: FlipH;
                -ms-filter: "FlipH";
            }

        .flip-container, .front, .back {
            width: 320px;
            height: 427px;
        }

        .flipper {
            -webkit-transition: 0.6s;
            -webkit-transform-style: preserve-3d;

            -moz-transition: 0.6s;
            -moz-transform-style: preserve-3d;

            transition: 0.6s;
            transform-style: preserve-3d;

            position: relative;
        }

        .front, .back {
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            backface-visibility: hidden;

            position: absolute;
            top: 0;
            left: 0;
        }

        .front {
            background: lightgreen;
            z-index: 2;
        }

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

        .front .name {
            font-size: 2em;
            display: inline-block;
            background: rgba(33, 33, 33, 0.9);
            color: #f8f8f8;
            font-family: Courier;
            padding: 5px 10px;
            border-radius: 5px;
            bottom: 60px;
            left: 25%;
            position: absolute;
            text-shadow: 0.1em 0.1em 0.05em #333;

            -webkit-transform: rotate(-20deg);
            -moz-transform: rotate(-20deg);
            transform: rotate(-20deg);
        }

        .back-logo {
            position: absolute;
            top: 40px;
            left: 90px;
            width: 160px;
            height: 117px;
            background: url(logo.png) 0 0 no-repeat;
        }

        .back-title {
            font-weight: bold;
            color: #00304a;
            position: absolute;
            top: 180px;
            left: 0;
            right: 0;
            text-align: center;
            text-shadow: 0.1em 0.1em 0.05em #acd7e5;
            font-family: Courier;
            font-size: 2em;
        }

        .back p {
            position: absolute;
            bottom: 40px;
            left: 0;
            right: 0;
            text-align: center;
            padding: 0 20px;
        }

        /* vertical */
        .vertical.flip-container {
            position: relative;
        }

            .vertical .back {
                -webkit-transform: rotateX(180deg);
                -moz-transform: rotateX(180deg);
                transform: rotateX(180deg);
            }

            .vertical.flip-container .flipper {
                -webkit-transform-origin: 100% 213.5px;
                -moz-transform-origin: 100% 213.5px;
                transform-origin: 100% 213.5px;
            }

            .vertical.flip-container:hover .flipper {
                -webkit-transform: rotateX(-180deg);
                -moz-transform: rotateX(-180deg);
                transform: rotateX(-180deg);
            }
    body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}

JS

function rotate(id) {
    $("#behind").load("person.php?id="+id,function(){
    document.querySelector('#flip-toggle').classList.toggle('flip');
    });
}

HTML

<div class="flip-container" id="flip-toggle">
    <div class="flipper"> 
        <div class="front" id="front" style="background: url(imagenes/fotos.jpg); background-size:100%; overflow:hidden">
            Front content
        </div> 
        <div class="back" id="atras">
            Back content
        </div> 
    </div> 
</div> 
<div id="bot1" style="visibility:visible; position:relative; z-index:5; cursor:pointer; float:left;" onClick="rotate('1');"></div>

封面内容
背景内容

也许有更简单的方法？我需要实际的3D旋转，而不是polifill，它只模拟旋转（我需要内容在动画期间可见）

---

非常感谢您的帮助，谢谢

您正在调用加载完成时的切换函数，这可能会给您一个延迟

---

由于没有太多的“back card”元素，我建议您预加载它们并完全避免延迟。

您正在加载整个页面，包括它的所有资产（javascript和CSS），而您只需要一点HTML

动画本身并不需要很长时间，需要很长时间的是对

person.php

的请求（person.php在我的浏览器上与它的所有资源一起加载大约需要1.7秒）

另外，为什么要同时使用

jQuery

和

document.querySelector

？这种做法违背了使用jQuery的目的

---

很可能您只想加载HTML，而不是所有的资产。如果您可以从person.php中删除资产，速度会快得多（我猜大约是10倍）。更正，我看到了动画，但时间太长了。：）谢谢Shomz和Adam。我使用的是我在特效教程中找到的document.querySelector（这是我获取代码并对其进行更改的地方）。亚当：我听从了你的建议，它的加载速度确实快多了！此外，我将按照Shomz的建议预加载翻转元素，使其更快，谢谢

querySelector

与它的速度慢无关-我只是特别提到它，因为

jQuery

基本上取代了

querySelector

并使它与跨浏览器兼容。暂时忽略这一部分，效果之所以慢是因为AJAX速度慢。