영어 개발 문서 챌린지 - css card flip편
15426 단어 CSSperspective영어CSS
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>
<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>
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
에 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
까지)transfrom-style: preserve-3d
를 사용해 perspective를 상속해줄 수 있다.transform-style
조금 더 알아봐야겠다.position: absolute
를 지정해 줘야한다.backface-visibility: hidden
을 사용해준다..card__face {
position: absolute;
height: 100%;
width: 100%;
backface-visibility: hidden;
}
<!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)
Author And Source
이 문제에 관하여(영어 개발 문서 챌린지 - css card flip편), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yws1502/영어-개발-문서-챌린지-css-card-flip편저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)