jquery - 如何创建3个侧面翻转效果

能否请您告诉我如何创建3面翻转效果

<div class="flip">
     <div class="card">
            <div class="face one">
                One
            </div>
            <div class="face two">
                Two
            </div>
             <div class="face three">
                Three
            </div>
     </div>
</div>

我尝试了一些here，但是它正在将第二张面孔从一跳到三。
谢谢

最佳答案

您可以尝试将transform: rotatex(90deg);添加到类.two
但这确实有点问题（至少在FF中），因此您可能还需要在translate3d()中添加transform：

.two {
    -webkit-transform: rotatex(90deg) translate3d(0, 50%, 2em);
    transform: rotatex(90deg) translate3d(0, 50%, 2em);

    $('.flip').click(function () {
        $(this).find('.card').addClass('flipped').mouseleave(function () {
            $(this).removeClass('flipped');
        });
        return false;
    });

body {
    background: #ccc;
}
.flip {
    -webkit-perspective: 800;
    perspective: 800;
    width: 400px;
    height: 200px;
    position: relative;
    margin: 50px auto;
}
.flipped {
    -webkit-transform: rotatex(-180deg);
    transform: rotatex(-180deg);
}
.card {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: .5s;
    -webkit-transition: .5s;
}
.face {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 2;
    font-family: Georgia;
    font-size: 3em;
    text-align: center;
    line-height: 200px;
    cursor: pointer;
}
.one {
    position: absolute;
    z-index: 1;
    background: black;
    color: white;
}
.two {
    -webkit-transform: rotatex(90deg) translate3d(0, 50%, 2em);
    transform: rotatex(90deg) translate3d(0, 50%, 2em);
    background: white;
    color: black;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}
.three {
    -webkit-transform: rotatex(-180deg);
    transform: rotatex(-180deg);
    background: green;
    color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flip">
    <div class="card">
        <div class="face one">One</div>
        <div class="face two">Two</div>
        <div class="face three">Three</div>
    </div>
</div>

关于jquery - 如何创建3个侧面翻转效果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26725588/