css 플립 카드

기록 #01: 컴퓨터

css 플립 카드

JinH 2014. 10. 8. 14:30

HTML


<div class="card_div">
	<div class="card">
		<div class="front">
			<p>앞면</p>
		</div>
		<div class="back">
			<p>뒷면</p>
		</div>
	</div>
</div>

CSS


.card_div:hover .card, .card_div.hover .card {
    transform: rotateY(180deg);
}

.card {
    transition: .6s;
    transform-style: preserve-3d;
    transform-origin: 100% 50% 0;
    position: relative;
}

.front, .back {
    backface-visibility: hidden;
    bottom: 0;
    left: 0;
    width: 100%;
}

.front {
    z-index: 2;
    transform: rotateY(0deg);
}

.back {
    transform: rotateX(-180deg);
    position: absolute;
}

.card_div:hover .card  {
    transform: rotateX(180deg);
}