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 이하에서는 동작이 안됩니다