jQuery Flip：为什么只有我的文字转而不是.card？

Question

我正在使用jQuery Flip Plugin。我试图让两张牌互相叠加，当用户点击一张牌时，它应该转动并显示背面。但现在只有文本翻转，而不是文本背后的卡片。我之前设法使用了它，但是我必须为front和back上课。

$(function() { 
 
    $(".card").flip({ 
 
    axis: "y", 
 
    reverse: "false", 
 
    trigger: "click", 
 
    speed: 700, 
 
    }); 
 
});

.card { 
 
    position: absolute; 
 
    width: 400px; 
 
    height: 248px; 
 
    margin: 2px; 
 
    background-color: #F3ECE2; 
 
    border: 5px blue solid; 
 
    padding: 10px; 
 
    border-radius: 25px; 
 
} 
 
#card-1 { 
 
    left: 0px; 
 
    top: 0px; 
 
    z-index: 1; 
 
} 
 
#card-2 { 
 
    left: 10px; 
 
    top: -238px; 
 
    z-index: 2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.rawgit.com/nnattawat/flip/v1.0.16/dist/jquery.flip.min.js"></script> 
 

 
<div class="card" id="card-1"> 
 
    <div> 
 
    Front1 
 
    </div> 
 
    <div> 
 
    Back1 
 
    </div> 
 
</div> 
 

 
<div class="card" id="card-2"> 
 
    <div> 
 
    Front2 
 
    </div> 
 
    <div> 
 
    Back2" 
 
    </div> 
 
</div>

Answer 1

从我的网站的理解，你需要front和back类添加到相应的div的，如图所示：

$(function() { 
 
    $(".card").flip({ 
 
    axis: "y", 
 
    reverse: "false", 
 
    trigger: "click", 
 
    speed: 700, 
 
    }); 
 
});

.card{ 
 
    width:200px; 
 
    height:100px; 
 
    position:relative; 
 
} 
 
.front, 
 
.back { 
 
    background-color: #F3ECE2; 
 
    border: 5px blue solid; 
 
    padding: 10px; 
 
    border-radius: 25px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.rawgit.com/nnattawat/flip/v1.0.16/dist/jquery.flip.min.js"></script> 
 

 
<div class="card" id="card-1"> 
 
    <div class="front"> 
 
    Front1 
 
    </div> 
 
    <div class="back"> 
 
    Back1 
 
    </div> 
 
</div> 
 

 
<div class="card" id="card-2"> 
 
    <div class="front"> 
 
    Front2 
 
    </div> 
 
    <div class="back"> 
 
    Back2 
 
    </div> 
 
</div>