如何创建三面翻转效果

Question

你能告诉我如何创造一个三面翻转效果

<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，但它正在跳过第二张脸，从一到三。 感谢

Answer 1

您可以尝试将transform: rotatex(90deg);添加到课程.two中 但它确实很糟糕（至少在FF中），因此您可能还需要在translate3d()中添加transform：

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

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;