1. CSS 3D
- html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Interactive Web</title>
<style>
.world {
/* 가운데 정렬 */
display: flex;
align-items: center;
justify-content: center;
width: 80vw;
height: 80vh;
background: #fff000;
/* 원근감 속성(3D) / 내 눈앞에 가까이 있을 수록
(수가 작아 질 수록) 효과 극대화
카드 전체에 원근감을 주고 싶을 때 사용
*/
perspective: 500px;
}
.card {
position: relative;
width: 100px;
height: 150px;
margin: 1em;
/* 카드 자체에 3D 효과를 주고싶으면 */
/* transform: perspective(500px) rotateY(45deg); */
/* transform: rotateY(45deg); */
/* default값을 설정해줘서 card의 hover 반응을 준비시켜줌 */
transform: rotateY(0deg);
transition: 1s;
/* card-side 까지 3d 효과를 적용시켜야해서 사용*/
transform-style: preserve-3d;
/* 왼쪽 기준으로 회전 */
/* transform-origin: left; */
}
.card-side {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 0;
top: 0;
/* 부모 크기 따라가도록 */
width: 100%;
height: 100%;
/* font-size(단위: rem) 비율대로 모서리 둥글게 */
/* 0.5em == 1.5rem * 0.5 */
border-radius: 0.5em;
/* rem em 차이점 파악 */
/* rem == html 내부 폰트 사이즈 */
font-size: 1.5rem;
/* 카드의 뒷면 보이지 않도록 */
/* 사파리의 경우 -webkit- ms의 경우 -ms-*/
-webkit-backface-visibility: hidden;
/* 마지막에 표준 속성을 적어주는게 좋음(마지막이 덮어쓰기 때문) */
backface-visibility: hidden;
}
.card-side-front {
z-index: 1;
background: white;
}
.card-side-back {
background: red;
transform: rotateY(180deg);
}
.world:hover .card {
/* transform: rotateY(180deg); */
transform: rotateY(-180deg);
}
</style>
</head>
<body>
<div class="world">
<div class="card">
<div class="card-side card-side-front">F</div>
<div class="card-side card-side-back">B</div>
</div>
<div class="card">
<div class="card-side card-side-front">F</div>
<div class="card-side card-side-back">B</div>
</div>
<div class="card">
<div class="card-side card-side-front">F</div>
<div class="card-side card-side-back">B</div>
</div>
</div>
</body>
</html>- card front(기본 화면)
- card back
- 양면을 사용하기 위한 구조
<div class="card"> <div class="card-side card-side-front">F</div> <div class="card-side card-side-back">B</div> </div>card의 position 값으로 relative(static이 아닌 값)
== card-side가 부모 기준으로 겹쳐있을 수 있도록
card-side 의 position 값으로 absolute(두장을 겹치기 위해)
<style>
.world {
/* 가운데 정렬 */
display: flex;
align-items: center;
justify-content: center;
width: 80vw;
height: 80vh;
background: #fff000;
/* 원근감 속성(3D) / 내 눈앞에 가까이 있을 수록
(수가 작아 질 수록) 효과 극대화
카드 전체에 원근감을 주고 싶을 때 사용
*/
perspective: 500px;
}
.card {
position: relative;
width: 100px;
height: 150px;
margin: 1em;
/* 카드 자체에 3D 효과를 주고싶으면 */
/* transform: perspective(500px) rotateY(45deg); */
/* transform: rotateY(45deg); */
/* default값을 설정해줘서 card의 hover 반응을 준비시켜줌 */
transform: rotateY(0deg);
transition: 1s;
/* card-side 까지 3d 효과를 적용시켜야해서 사용*/
transform-style: preserve-3d;
/* 왼쪽 기준으로 회전 */
/* transform-origin: left; */
}
.card-side {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 0;
top: 0;
/* 부모 크기 따라가도록 */
width: 100%;
height: 100%;
/* font-size(단위: rem) 비율대로 모서리 둥글게 */
/* 0.5em == 1.5rem * 0.5 */
border-radius: 0.5em;
/* rem em 차이점 파악 */
/* rem == html 내부 폰트 사이즈 */
font-size: 1.5rem;
/* 카드의 뒷면 보이지 않도록 */
/* 사파리의 경우 -webkit- ms의 경우 -ms-*/
-webkit-backface-visibility: hidden;
/* 마지막에 표준 속성을 적어주는게 좋음(마지막이 덮어쓰기 때문) */
backface-visibility: hidden;
}
.card-side-front {
z-index: 1;
background: white;
}
.card-side-back {
background: red;
/* default로 뒤집어 놓음 */
transform: rotateY(180deg);
}
.world:hover .card {
/* transform: rotateY(180deg); */
transform: rotateY(-180deg);
}
</style>3D 설정
.world { perspective: 500px; }
- 원근감 속성(3D) / 내 눈앞에 가까이 있을 수록(수가 작아 질 수록) 효과 극대화
- 카드 전체에 원근감을 주고 싶을 때 사용
- card container인 world에 perspective 속성
- 마우스가 사람 얼굴이라 가정
.card { transform: perspective(500px) rotateY(45deg); }
- 카드 자체에 3D 효과를 주고싶으면 card 자체에 perspective 적용
.card { transform-style: preserve-3d; }
- card-side 까지 3d 효과를 적용시켜야해서 사용
- world에 적용한 perspective 효과가 card-side까지 영향 미치도록
backface-visibility: hidden;
- 카드 rotateY 시겼을 때 뒷면 안보이도록
transform-origin: left; == 0%
- 왼쪽 기준으로 회전
- 기준점 변경
이창목