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 이하에서는 동작이 안됩니다
'World Wide Web > CSS' 카테고리의 다른 글
| 모바일에서 a태그 영역 감추기 (0) | 2018.07.03 |
|---|---|
| 정찬명님의 반응형 웹 구축기 (0) | 2017.02.27 |
| tbody 스크롤 만들기 (3) | 2015.07.14 |
| div에서 세로정렬 시키기 (0) | 2015.06.25 |
| "..."을 css로 처리하는 방법 (0) | 2015.06.25 |