使用多张卡时，Jquery翻转不显示正常

Question

我正在使用jquery翻转库来翻转卡片。 我想要显示这样的卡片。

但是当我在多张卡上应用翻转lib时，显示

第二张翻转卡位于第三张牌下。我被困在这里该做什么。请帮我正常工作。

这是我的代码。

  

JQUERY

$("#card1").flip({ autoSize : true }); $("#card2").flip({ autoSize : true });

  

HTML

<div class="project-item webdesign mobileapps photography" id="card1">
    <div class="front">
        <img src="include/images/portfolio-4.jpg" alt="">
        <div class="overlay">
        </div>
    </div>
    <div class="back">
        <h4><a href="portfolio-single-1.html">Bold & Beautiful</a></h4>
        <p>
            Dow wisi enim ad minim veniam, quis nostrud at exerci tation ullamcorper suscipit lobortis exerci nisl. 
        </p>
    </div>
</div>

<div class="project-item webdesign branding mobileapps photography" id="card2">
    <div class="project-image front">
        <img src="include/images/portfolio-2.jpg" alt="">
        <div class="overlay">
        </div>
    </div>
    <div class="back">
        <h4><a href="portfolio-single-1.html">Feeling Natural</a></h4>
        <p>
            Dow wisi enim ad minim veniam, quis nostrud at exerci tation ullamcorper suscipit lobortis exerci nisl. 
        </p>
    </div>
</div>

我不知道我在3天内工作的问题在哪里。请帮忙。

先谢谢。

最诚挚的问候，

Hamaad

Answer 1

这是一种不同的方法，但只使用CSS即可实现卡片翻转效果。

工作示例：

＆＃13;

＆＃13;

.card {
display: inline-block;
position: relative;
width: 100px;
height: 60px;
margin: 12px;
border: 1px solid rgb(127,127,127);
cursor: pointer;
transition: transform 0.5s linear;
}

.front, .back {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 60px;
line-height: 60px;
font-size: 28px;
text-align: center;
}

.back {
color: rgb(255,255,255);
background-color: rgb(0,0,0);
opacity: 0;
transform: rotateY(180deg);
transition: opacity 0s linear 0.25s;
}

.card:focus {
transform: rotateY(180deg);
}

.card:focus .back {
opacity: 1;
}

＆＃13;

<div class="card" tabindex="0"> 
<div class="front">Front 1</div> 
<div class="back">Back 1</div> 
</div>

<div class="card" tabindex="0"> 
<div class="front">Front 2</div> 
<div class="back">Back 2</div> 
</div>

<div class="card" tabindex="0"> 
<div class="front">Front 3</div> 
<div class="back">Back 3</div> 
</div> 

<p>Click on each card to flip it.</p>

＆＃13;

＆＃13;

＆＃13;