当我点击前面的div时，后面的div必须翻转。但这里的问题是当我点击前面的div时，它被翻转并显示前面div的反向视图。后部div没有显示。我无法找到问题，为什么它表现得像这样。
代码： -
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../../css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="../../js/bootstrap.js"></script>
<style>
.flip {
-webkit-perspective: 800;
perspective: 800;
position: relative;
}
.flip .card.flipped {
-webkit-transform: rotatex(-180deg);
transform: rotatex(-180deg);
}
.flip .card {
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
transform-style: preserve-3d;
transition: 0.5s;
}
.flip .card .face {
-webkit-backface-visibility: hidden ;
backface-visibility: hidden ;
z-index: 2;
}
.flip .card .front {
position: absolute;
width: 100%;
z-index: 1;
}
.flip .card .back {
-webkit-transform: rotatex(-180deg);
transform: rotatex(-180deg);
}
.inner{margin:0px !important;}
</style>
</head>
<body>
<!-- Flip view -->
<div class="flip">
<div class="card">
<div class="face front">
<div class="well well-sm inner"> Front</div>
</div>
<div class="face back">
<div class="well well-sm inner"> Back</div>
</div>
</div>
</div>
</body>
<script>
$('.flip').click(function(){
$(this).find('.card').toggleClass('flipped');
});
</script>