HTML/CSS/JS를 사용하여 뒤집을 수 있는 카드 만들기

이 단계를 추적하여 뒤집을 수 있는 카드를 쉽게 만들 수 있습니다.

HTML 파일:

<div class="wordCard">
    <div class="cardFace frontFace">
        <span>front</span>
    </div>
    <div class="cardFace backFace">
        <span>back</span>
    </div>
</div>

CSS 파일:

.wordCard {
    width: 200px;
    height: 300px;
    position: relative;
    perspective: 1000px;
    cursor: pointer;
}

.cardFace {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    color: white;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: transform .5s linear;
    transform-style: preserve-3d;
}

.backFace {
    background-color: blue;
    transform: rotateY(180deg);
}

.frontFace {
    background-color: green;
    transform: rotateY(0deg);
}

.flipped .backFace {
    transform: rotateY(360deg);
}

.flipped .frontFace {
    transform: rotateY(180deg);
}

우리는 두 종류의 얼굴을 가지고 있습니다. 정상 및 뒤집힌 얼굴.

우리의 중요한 재산은 backface-visibilty: hidden; 입니다. 이 속성은 요소의 뒷면을 숨기는 데 도움이 됩니다.

다른 중요한 속성은 transform-style: preserve-3d;입니다. 이 속성은 요소가 회전할 때 요소에 3D 회전 효과를 줍니다.

그리고 자바스크립트 파일:

var card = document.querySelector('.wordCard');
card.addEventListener('click', () => {
    card.classList.toggle('flipped');
});

위에서 click 이벤트를 토글.wordCard 클래스로 설정했습니다. 이런 식으로 이 카드를 전환 기간으로 애니메이션화할 수 있습니다.