Basics Card Flip
<div class="scene">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>- 위와 같이 scene, card, card__face 3가지 구역으로 이루어져있다.
- scene, object, faces와 같이 3D transform에는 이러한 동일한 패턴을 사용하는 것을 추천한다고 한다.
- 처음으로 object(
card)가 되는 친구의 부모(scene)에perspective속성을 추가해준다.(지금의 경우에서는 card의 부모인 scene에 perspective 설정)- perspective란 원근법이라는 뜻으로 웹페이지에서 동적인 원근감을 적용시켜준다.
- perspective의 값이 작을수록 부담스럽게 나한테 온다...
.scene {
width: 200px;
height: 260px;
perspective: 600px;
}- 이제
card에서 부모의 3D space안에서 transform이 가능하다. 그리고card는 부모의 크기를 그대로 가져가기 위해 width와 height를 100%로 지정해주며 transform-origin은 container에 가운데에서 작동할 것이다. - 또한 card의 자식인 card__face의 자리를 잡아주기 위해
card에position: relative속성을 추가한다.transform-origin을 사용하면 transform의 방향을 지정해줄 수 있다.(속성 값으로 top, right, left, bottom 지정 가능 더 많은 정보는 여기 클릭)
.card {
width: 100%;
height: 100%;
position: relative;
transition: transform 1s;
transform-style: preserve-3d;
}- 요소의
perspective는 직계 자식 밖에 지원되지 않는다(지금의 경우는card까지) - 부모의 perspective를 후손에게 상속하고 3D space를 live하기 위해 부모는
transfrom-style: preserve-3d를 사용해 perspective를 상속해줄 수 있다. - 3D transform-style 없이, 카드의 면은 부모와 함께 단조로워지고, 뒷면의 회전이 무효화된다.
transform-style조금 더 알아봐야겠다.
- 3D space안에 카드의 면의 자리를 지정하기 위해, 우리는
position: absolute를 지정해 줘야한다. - 카드의 면이 뒤로 뒤집어질때 카드면의 뒷면을 가리기 위해서
backface-visibility: hidden을 사용해준다.
.card__face {
position: absolute;
height: 100%;
width: 100%;
backface-visibility: hidden;
}- card에 hover 됐을 때 카드 뒤집기!
- 이제 각자의 면에 색을 넣어주고 뒷면에는 rotateY를 지정해주자!
블로그를 참고하여 내가 짠 코드
<!DOCTYPE html>
<html lang="ko">
<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>card flip</title>
<style>
.scene {
width: 200px;
height: 260px;
perspective: 600px;
}
.scene .card {
width: 100%;
height: 100%;
position: relative;
transition: 1s;
transform-style: preserve-3d;
}
.card:hover {
transform: rotateY(180deg);
}
.card .card_face {
position: absolute;
height: 100%;
width: 100%;
backface-visibility: hidden;
}
.card .card_face.front {
background-color: red;
}
.card .card_face.back {
background-color: blue;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="scene">
<div class="card">
<div class="card_face front">front</div>
<div class="card_face back">back</div>
</div>
</div>
</body>
</html>
회고
- 영어로 된 문서를 읽으며 직접 구현을 해볼 수 있어 좋았던 경험이었지만 영어로된 표현을 받아드리기 아직은 어렵다는 점을 상기할 수 있게 되었다. 앞으로 꾸준히 진행하며 영어 표현에 익숙해져야 겠다.
reference site(https://3dtransforms.desandro.com/card-flip)
