프런트 및 백 사이트 플립 효과

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> 

그래서 나는 여러 개의 카드가 마우스 오버에 자신의 백 측면에 플립 싶다. 솔루션은 jQuery를 통해 (rotateY) 뒤집기위한 CSS3 애니메이션이있는 클래스를 토글하는 것 같지만 작동시키지 않습니다.

안부 데이브

Answer 1

돌아 가기 전면 플립 효과가 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