🔍 완성 화면
🔍 전체코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game Card</title>
<link rel="stylesheet" href="main.css" />
</head>
<style>
:root {
--primary: #FFCE00;
--secondary: #FE4880;
--dark: #212121;
--light: #F3F3F3;
}
* {
margin: 0;
padding: 0;
}
body {
font-family: montserrat, sans-serif;
width: 100%;
min-height: 100vh;
}
.card {
margin: 100px auto 0;
width: 400px;
height: 600px;
}
.card__inner {
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
cursor: pointer;
position: relative;
perspective: 1000px;
}
.card__inner.is-flipped {
transform: rotateX(180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
border-radius: 16px;
box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, 0.2);
}
.card__face--front {
background-image: linear-gradient(to bottom right, var(--primary), var(--secondary));
display: flex;
align-items: center;
justify-content: center;
}
.card__face--front h2 {
color: #FFF;
font-size: 32px;
}
.card__face--back {
background-image: linear-gradient(to bottom right, var(--primary), var(--secondary));
display: flex;
align-items: center;
justify-content: center;
transform: rotateX(180deg);
}
.card__face--back h2 {
color: #FFF;
font-size: 32px;
}
</style>
<body>
<div class="card">
<div class="card__inner">
<div class="card__face card__face--front">
<h2>앞면</h2>
</div>
<div class="card__face card__face--back">
<h2>뒷면</h2>
</div>
</div>
</div>
<script>
const card = document.querySelector(".card__inner");
card.addEventListener("click", function (e) {
card.classList.toggle('is-flipped');
});
</script>
</body>
</html>🔍 transform-style : preserve-3d란
transform-style : preserve-3d 를 적용하면 기본적으로 자식 요소들이 3D 공간에 배치 된다.
3D 효과를 먹이고 싶은 상위 컨테이너에 적용시키면 그 밑의 요소들에게 3D 효과가 먹여진다.
🔍 backface-visibility 란
카드의 앞면과 뒷면이 번갈아 가면서 나타날때, 반대편 면은 뒤집어져야하고, 그 면은 보이지 않아야한다.
기본값은 visible 이지만, hidden 으로 설정을 해줌으로써 뒤집어진 면은 안보이도록 해준다.
🔍 알아두어야할 점
카드 두개가 겹쳐있다고 했을때, 반대편 면은 뒤집어져있어야하므로 transform 속성을 이용해서 처음부터 뒤집어놓아야 한다.
https://brgndy.me/ 로 옮기는 중입니다 :)