Question

我正在尝试使用jQuery（Transit）制作翻转3D动画，但我无法正确翻转卡片的内容。

CSS ：

.flip-back {

    z-index: 300;
    background-color: #f0d6a3;
    transform: rotateY(180deg);
}

.flip-back, .flip-front {

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    left: 0;
    position: absolute;
    top: 0;
}

.flip-container {

    height: 250px;
    position: relative;
}

.flip-content {

    position: relative;
    width:100%;
    height:100%;
}

.flip-front {

    background-color: #ffffff;
    position: absolute;
    z-index: 600;
}

HTML ：

<div class="col-lg-4 text-center flip-container">
    <div class="flip-content">
        <div class="flip-front">
            Front                    
        </div>
        <div class="flip-back">
            Back
        </div>
    </div>
</div>

JS ：

$('.flip-container').mouseenter( function() {

    $(this).children('.flip-content').transition({rotateY: '180deg'});
});
$('.flip-container').mouseleave( function() {

    $(this).children('.flip-content').transition({rotateY: '0deg'});
});

问题在于，当我尝试为翻盖设置动画时，仅翻转前部并且不显示背部。

Answer 1

发现问题，我只需要添加

-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;

在.flip-content CSS类中解决问题。

无法正确完成翻转3D动画

1 个答案: