TIL/CSS

[CSS] CSS 3D (양면 카드 만들기)

철 그잡채 2022. 10. 11. 18:32

 

양면 카드 만들기

 

<!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) }

 

 

https://codepen.io/cheolship/pen/yLjQdJY

 

Point !

  1. card-face의 backface-visibility를 hidden 처리해준다.
  1. card의 transform-style을 preserve-3d 해준다.

 


Uploaded by

N2T