여러 장의 카드를 사용하는 중에 jquery flip이 정상적으로 표시되지 않습니다.

Question

카드를 뒤집기 위해 jquery flip library를 사용하고 있습니다. 이렇게 카드를 표시하고 싶습니다. 내가 이렇게 디스플레이보다 하나 개 이상의 카드

에 플립 LIB를 적용하면

는하지만 2 플립 카드는 세번째 카드를 받고있다. 나는 지금 무엇을해야할지 여기에 붙어있다. 정상적으로 일하도록 도와주세요.

여기 내 코드입니다.

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를 사용하여 카드 뒤집기 효과를 얻을 수 있습니다.

작업 예 :

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

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