양면 카드 만들기
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>양면 카드</title> </head> <body> <div class="card"> <div class="card-face card-back-face"> back </div> <div class="card-face card-front-face"> front </div> </div> </body> </html>
:root { background: #000; } .card { position: relative; width: 200px; height: 300px; transform-style: preserve-3d; transition: 0.5s } .card:hover { transform: perspective(1000px) rotateY(180deg); } .card-face { position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; border-radius: 10px; backface-visibility: hidden; } .card-front-face { background: blue; } .card-back-face { background: red; transform: rotateY(180deg) }
Point !
- card-face의 backface-visibility를 hidden 처리해준다.
- card의 transform-style을 preserve-3d 해준다.
Uploaded by
N2T