# 단면 3D 카드 만들기
- card.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="id=edge">
<title>CSS 3D</title>
<style>
.space {
display: flex;
justify-content: center;
align-items: center;
gap: 100px;
width: 80vw;
height: 80vh;
background: #e0e0e0;
}
.card {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 150px;
border-radius: 0.5em;
font-size: 1rem;
background: yellow;
transform: rotateY(60deg);
}
</style>
</head>
<body>
<div class="space">
<div class="card">CARD</div>
<div class="card">CARD</div>
<div class="card">CARD</div>
</div>
</body>
</html>어떤 컨테이너 안에 카드 3장이 있습니다.
그 카드를 60도 만큼 Y축을 기준으로 돌려본다면
이 화면은 3D가 아니기 때문에 아래 화면 처럼 나올겁니다.
입체가 아니기 때문에 카드를 돌려도 평면으로 나와 크기가 줄어든거처럼 보입니다.
이걸 해결하기 위해선 카드를 잡고있는 영역을 3D 공간으로 만들어줘야하는데
이때 사용하는 속성이 perspective 입니다.
스페이스 영역에 속성을 추가해보겠습니다
.space {
display: flex;
justify-content: center;
align-items: center;
gap: 100px;
width: 80vw;
height: 80vh;
background: #e0e0e0;
perspective: 500px;
}그랬더니 입체감이 생겼습니다.
근데 문제가 있네요
perspective라는 속성은 원근법으로 눈으로 부터의 거리를 속성값으로 주게되는데
가운데를 기준으로 왼쪽과 오른쪽으로 시선을 보면 모양이 다르기때문에
같은 컴포넌트임에도 다른 모습으로 나온것을 볼 수 있습니다.
다 같은 모습을 나타내고 싶다면 이렇게 하면 됩니다.
.space {
display: flex;
justify-content: center;
align-items: center;
gap: 100px;
width: 80vw;
height: 80vh;
background: #e0e0e0;
}
.card {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 150px;
border-radius: 0.5em;
font-size: 1rem;
background: yellow;
transform: perspective(500px) rotateY(60deg);
}부모에 있던 perspective 속성을 자식의 transform 속성에다가 넣어주면됩니다.
이제 같은 모양새를 띄우네요
# 양면 3D 카드 만들기
자 이제 양면 카드를 만들어보겠습니다.
양면카드는 이제 카드내부에 앞 뒤로 쓸 요소를 두 개 넣어줘야합니다.
See the Pen CSS 3D by jong-jang (@jong-jang) on CodePen.
이제 마우스를 올려서 확인해보면 뒤집었는데도 앞면이 나오는것을 볼 수 있습니다.
왜 그런일이 발생하냐면 현재 space를 3D 공간으로 만들었는데
card 라는 클래스 요소는 아무것도 지정을 해주지 않았기 때문에 안쪽 내부 요소들까진
입체적으로 표현이 안되는 현상이 발생했습니다.
이럴 때는 transform-style 속성 값을 preserve-3d 를 지정해주면 됩니다.
또 하나 상태 중복 방지를 위해 앞면인 요소의 뒷 부분을 hidden 시켜줘야합니다
See the Pen CSS 3D 2 by jong-jang (@jong-jang) on CodePen.
자 이제 앞 뒷면이 잘나오는건 확인 했고
뒷면이 아직 180도 돌아가 있는 모습을 볼수있습니다.
뒷면인 요소는 180를 미리 돌려놔야겠네요
See the Pen CSS 3D 3 by jong-jang (@jong-jang) on CodePen.
양면 카드가 완성되었습니다.
만약 문을 구현하고 싶다?
그러면 transform-origin 속성을 이용해 축을 왼쪽이나 오른쪽으로 바꿔주시면 됩니다.
See the Pen CSS 3D 4 by jong-jang (@jong-jang) on CodePen.
'css' 카테고리의 다른 글
| [CSS] transform, transition, animation 속성으로 애니메이션 구현해보기 (0) | 2023.09.30 |
|---|---|
| [CSS] radio, checkbox 드래그 방지 (0) | 2023.07.19 |
| [CSS] 자동완성 / user agent stylesheet (0) | 2023.03.06 |
