이전 포스팅에서 카드를 입체감으로 보이기 위한 작업을 했다
배운 내용을 복습하기 위한 포스팅인데 gif까지 따서 업로드까지하는 정성을 들이기엔 너무 귀찮아서 코드와 설명만으로 복기하려한다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
.background{
display: flex;
align-items: center;
justify-content: center;
width: 40vw;
height: 40vh;
background-color: green;
perspective: 500px;
}
.card {
margin: 1rem;
width: 100px;
height: 150px;
transform: perspective(500px);
transition: 1s;
position: relative;
transform-style: preserve-3d;
}
.card-side{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
left: 0;
top: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.card-side-front {
box-sizing: border-box;
border: 7px solid red;
background-color: white;
transform: rotateY(0);
}
.card-side-back {
background-color: red;
transform: rotateY(180deg);
}
.background:hover .card{
transform: rotateY(180deg) ;
}
</style>
</head>
<body>
<h1>CSS 3D</h1>
<div class="background">
<div class="card">
<div class="card-side card-side-front">Front</div>
<div class="card-side card-side-back">Back</div>
</div>
</div>
</body>
</html>우선 카드는 앞면,뒷면을 구성해야 하기에 front,back 두개로 나누었고
<div class="card-side card-side-front">Front</div>
<div class="card-side card-side-back">Back</div>두 카드를 겹쳐야하기 때문에 두 카드가 공통적으로 가지고 있는 class인 .card-side에 absolute를 줘야한다
하지만 그 전에 absolute는 static을 제외한 모든 부모를 기준으로 위치를 정하기 때문에
.card {
position: relative;
...
}부모에 relative 값을 주고
.card-side{
position: absolute;
left: 0;
top: 0;
...
}로 두 카드를 포개고 위치를 고정시켰다
우선 카드 회전을 테스트하기 위해 마우스를 올렸을 때 카드를 뒤집게끔 hover를 이용
.background:hover .card{
transform: rotateY(180deg) ;
}이대로 뒤집으면 코드의 아래에 위치한 Back 카드만 보이고 돌아가게된다
Back이 돌아가면? 글자는 뒤집혀서 보인다 그럼 어떻게 해줘야할까
처음부터 180도 뒤집어놓고 마우스를 올려서 360도 돌리면 카드는 뒤집혀도 Back 글씨가 제대로 보이게 된다
.card-side-back {
transform: rotateY(180deg);
}
.card-side-front {
transform: rotateY(0deg);
}front는 왜 0도로 설정해놓은걸까? 0으로 해놓는 건 설정하지 않은 것과 다를게 없을텐데
조금 다르다고 한다 transform 0도로 설정해놓으면 설정해놓지 않은 것과 다르게 이 친구가 transform할 친구라는 것을 알고 있기 때문에 준비해놓고
마우스를 올려서 transform시킬 때 설정하지 않은 것 보다 빠르게 처리할 수 있다고한다
물론 육안으로는 구분할 수 없다
이제 앞면이 보이고 돌아도 가는데 카드가 앞면과 뒷면이 수시로 전환되면서 깜빡거린다
바로 front와 back의 뒷면이 같이 보여서 그런데 말그대로 각각 카드의 뒷면을 얘기하는 것
앞면인 상태일 땐 back의 kcab가 뒤집어진 상태에선 Front의 tnorF가 전환되면서 깜빡깜빡거린다
이럴 땐 뒷면을 안보이게 설정해 주면 된다
두 카드 모두 뒷면을 없애야하기 때문에 둘 다 가지고 있는 card-side에
.card-side{
backface-visibility: hidden;
...
}를 추가해주면
완성
