menu

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); }
신고

퍼가지 말고, 링크로 공유하세요. 자세한 건 공지에.

  1. 비밀댓글입니다

    2014.10.08 20:59   link delete reply

퍼가지 마세요...
링크로 공유하세요 ㅠㅠ
부탁할게요 ^_<~*

test 3-1

test 3-2

test 3-3

test 4-1

test 4-2

test 4-3

모든 글 보기
공지
방명록
Share to...

페이스북 공유

트위터 공유

구글+ 공유

카카오스토리 공유

밴드 공유

Follow & Contact

Facebook

Twitter

Mail

RSS 구독

2007-2016 © JinH