Jquery flip не отображается нормально при использовании нескольких карт

Я использую библиотеку jquery flip для переворачивания карт. я хочу отображать карты, как это. карты без флип-библиотеки

но когда я применяю флип-библиотеку более чем к одной карте, это отображается так,

карты с флип-библиотекой

вторая флип-карта находится под третьей картой. я застрял здесь, что делать теперь. пожалуйста, помогите мне работать нормально.

вот мой код.

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 дня. пожалуйста помоги.

Заранее спасибо.

С уважением,

Хамаад


html jquery css flip
person Hamaad Hussain    schedule 24.02.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это другой подход, но вы можете добиться эффекта переворачивания карт, используя только 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>

person Rounin    schedule 25.02.2017