Flip Effect с передним и задним сайтом

Question

Я хочу создать эффект флип, который срабатывает при наведении курсора мыши и возвращается обратно на переднюю панель мыши. Таким образом, перед вами должна быть передняя и задняя сторона карты, которая должна флип: HTML:

<div class="card"> 
    <div class="front"> Front-Content </div> 
    <div class="back"> Back-Content </div> 
</div> 

<div class="card"> 
    <div class="front"> 2nd Front-Content </div> 
    <div class="back"> 2nd Back-Content </div> 
</div> 

так как вы можете видеть, что я хочу несколько карт, чтобы перевернуть их обратные стороны при наведении курсора мыши. Я думаю, что решение будет переключать класс, который имеет анимацию CSS3 для flipping (rotateY) через jQuery, но я не могу заставить его работать.

С наилучшими пожеланиями Dave

Answer 1

Back-Front Flip эффект может быть достигнут с помощью CSS, Попробуйте это: http://davidwalsh.name/css-flip

Answer 2

.card-container{ 
 
    width: 100px; 
 
    perspective : 1000px; 
 
    -webkit-perspective : 1000px; 
 
} 
 
.card{ 
 
    position : relative; 
 
    height: 100px; 
 
    width: 100px; 
 
    margin-bottom: 10px; 
 
    transform-style: preserve-3d; 
 
} 
 

 
.front{ 
 
    background-color: #f00; 
 
    height : 100px; 
 
    width : 100px; 
 
    position: absolute; 
 
    top : 0; 
 
    left : 0; 
 
    z-index : 3; 
 
    transform : rotate(0deg); 
 
    -moz-transform : rotate(0deg); 
 
    transition : 1s transform; 
 
    transform-style: preserve-3d; 
 
    backface-visibility: hidden; 
 
} 
 

 
.back{ 
 
    background-color: #00f; 
 
    height: 100px; 
 
    width : 100px; 
 
    position : absolute; 
 
    top : 0; 
 
    left : 0; 
 
    z-index : 1; 
 
    transform : rotateY(-180deg); 
 
    -moz-transform : rotateY(-180deg); 
 
    transition : 1s transform; 
 
    transform-style: preserve-3d; 
 
    backface-visibility: hidden; 
 
} 
 
.card-container:hover .front{ 
 
    transform : rotateY(180deg); 
 
    -moz-transform : rotateY(180deg); 
 
} 
 
.card-container:hover .back{ 
 
    transform : rotateY(0deg); 
 
    -moz-transform : rotateY(0deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div class="card-container"> 
 
    <div class="card"> 
 
     <div class="front"> Front-Content </div> 
 
     <div class="back"> Back-Content </div> 
 
    </div> 
 
</div> 
 
<div class="card-container"> 
 
    <div class="card"> 
 
     <div class="front"> 2nd Front-Content </div> 
 
     <div class="back"> 2nd Back-Content </div> 
 
    </div> 
 
</div>

Вы можете найти ваше решение over here