클릭시 CSS 플립 애니메이션

Question

플립 애니메이션을 제공하기 위해 example David Walsh을 따르고 있습니다. 그것은 모두 호버 (hover)에서 작동하지만, 호버 (hover)가 아닌 클릭 (click)에서 요소를 뒤집기를 원합니다.

다음 코드는 작동하지만 hover에서 요소를 뒤집습니다. 그러나 이것을 구현하기 위해 javascript/jquery를 사용하고 싶습니다. 나는 여러 가지 방법을 시도했지만 이것을 수행하는 방법을 알 수 없습니다.

.flip-container { 
 
    perspective: 1000px; 
 
} 
 
.flip-container:hover .flipper, 
 
.flip-container.hover .flipper { 
 
    transform: rotateY(180deg); 
 
} 
 
.flip-container, 
 
.front, 
 
.back { 
 
    width: 320px; 
 
    height: 480px; 
 
} 
 
.flipper { 
 
    transition: 0.6s; 
 
    transform-style: preserve-3d; 
 
    position: relative; 
 
} 
 
.front, 
 
.back { 
 
    backface-visibility: hidden; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.front { 
 
    z-index: 2; 
 
    transform: rotateY(0deg); 
 
} 
 
.back { 
 
    transform: rotateY(180deg); 
 
}

<div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 
 
    <div class="flipper"> 
 
     <div class="front"> 
 
      1 
 
     </div> 
 
     <div class="back"> 
 
      2 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

https://jsfiddle.net/pf4aemn7/ HTML

<div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 
    <div class="flipper"> 
    <div class="front"> 
     1 
    </div> 
    <div class="back"> 
     2 
    </div> 
    </div> 
</div> 

CSS

.flip-container { 
    perspective: 1000px; 
} 

.flip-container.hover .flipper { 
    transform: rotateY(180deg); 
} 
.flip-container, 
.front, 
.back { 
    width: 320px; 
    height: 480px; 
} 
.flipper { 
    transition: 0.6s; 
    transform-style: preserve-3d; 
    position: relative; 
} 
.front, 
.back { 
    backface-visibility: hidden; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
.front { 
    z-index: 2; 
    transform: rotateY(0deg); 
} 
.back { 
    transform: rotateY(180deg); 
} 

JS

012,396,

Answer 2

ontouchstart 대신 .flip-container에서 onclick 이벤트 처리기를 사용하십시오. 물론 CSS 유형 :hover 선택기 (예 : .flip-container:hover .flipper)를 스타일에서 삭제하는 것을 잊지 마십시오.

.flip-container { 
 
    perspective: 1000px; 
 
} 
 
.flip-container.hover .flipper { 
 
    transform: rotateY(180deg); 
 
} 
 
.flip-container, 
 
.front, 
 
.back { 
 
    width: 320px; 
 
    height: 480px; 
 
} 
 
.flipper { 
 
    transition: 0.6s; 
 
    transform-style: preserve-3d; 
 
    position: relative; 
 
} 
 
.front, 
 
.back { 
 
    backface-visibility: hidden; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.front { 
 
    z-index: 2; 
 
    transform: rotateY(0deg); 
 
} 
 
.back { 
 
    transform: rotateY(180deg); 
 
}

<div class="flip-container" onclick="this.classList.toggle('hover');"> 
 
    <div class="flipper"> 
 
    <div class="front"> 
 
     1 
 
    </div> 
 
    <div class="back"> 
 
     2 
 
    </div> 
 
    </div> 
 
</div>

또한, 나는 당신이 .clicked 같은 더 적절한 무언가에 .hover 클래스의 이름을 변경한다고 생각합니다.