World Wide Web/CSS

css3 flip효과주기

인천매력쟁이 2017. 2. 7. 16:42

IE9 이하에서는 동작이 안됩니다. 때문에 사용자를 위한 대책마련이 필요합니다.

HTML

<body>
<section class="container">
<div id="card" class="">
<div class="front">1</div>
<div class="back">2</div>
</div>
</section>
</body>


CSS
.container {
width: 200px;
height: 260px;
position: relative;
perspective: 1000px;
}
#card {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
#card div {
margin: 0;
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
#card .front {
background: red;
}
#card .back {
background: blue;
transform: rotateY( 180deg );
}
#card.a {
transform: rotateY( 180deg );
}


#card에 addClass("a"), removeClass("a")로 toggle시키면 됩니다.

간단한 코드로 자연스럽고 멋스러운 효과주기에 안성맞춤입니다.

다시 한번 더 말씀드리자면 IE9 이하에서는 동작이 안됩니다