<HTML/CSS> Animation : 카드 뒤집기

CSS Animation 기초는 Rock's Easy Web을 기본으로 공부하고 있습니다. 

 

오늘 배울 내용은 마우스를 올렸을때 카드가 뒤집히는 Animation을 공부하고자 합니다. 이 효과를 공부하기 위해 지금까지 CSS의 Animation 효과의 기본을 여러가지로 공부해 보았습니다. 카드가 뒤집혀지는 효과를 통하여 자바스크립트 카드뒤집기 게임을 만들기 위한 기본과정을 살펴본 겁니다. 

 

▒ 카드 뒤집기 

 

CSS에서 카드를 뒤집는 효과는 그동안 배웠던 Animation 속성중 Transition, Transform, Rotation을 전부 응용하는 작업입니다. 이를 위해서 아무 그림이나 사용할 수 있게 작업하는 폴더에 그림파일을 저장합니다. 

 

저는 첫화면은 다음과 같은 그림을 올리고 마우스를 올리면 뒷면의 글씨가 나타나는 작업을 할 예정입니다. 

 

앞면

 

뒷면

 

1. HTML 

 

HTML에서 4개의 <div>태그를 만들고자 합니다. 첫번째 <div>는 전체적인 프레임 영역을 표시하고 두번째 <div>는 실질적인 카드의 영역 나머지 두개의 <div>는 실제 카드 앞과 뒷면입니다. 

 

이렇게 하는 이유는 두번째 <div>에 transition과 transform 속성을 주어 두개의 카드(앞과 뒤)가 동시에 움직이는 효과를 보고자함입니다. 

 

 

 

2. CSS Animation 작업

 

① 전체영역 맞춤 및 Position 잡기

 

어떤 그림을 쓰던간에 원하는 사이즈가 아닐 수 있습니다. 따라서 다운받은 이미지의 크기를 회전하고자 하는 크기로 조정해 주어야 합니다. 여기서는 전체 영역과 모든 사이즈를 맞출 예정입니다. 

 

카드와 영역의 크기를 같이 맞춰주고 기준이 되는 영역의 위치를 relative로 값을 줍니다. 나머지 실제카드 앞면과 뒷면의 position은 absolute로 relative위에 띄어주는 작업을 합니다. 

우선 카드 뒤면은 나중에 작업을 할 예정으로 다음을 먼저 CSS작업을 해 줍니다. 

 

 

② 카드 회전 

 

마우스를 올렸을 경우 카드를 단순 회전시키도록 하겠습니다. 회전은 y축을 기준으로 회전하겠죠. 회전하는 효과를 주기위하여 transition도 같이 보도록 하겠습니다. 

 

 

이렇게 하면 카드자체가 회전을 합니다. 표지판 그림이 앞 뒤 바뀌어서 보입니다. 카드 뒷면에 쓰여질 글씨도 같이 돕니다. 참고로 아래 그림은 이해를 위하여 180도 회전한 그림입니다. 

 

 

 

③ 카드 앞면 작업

 

카드 앞면 작업은 역시 위치는 absolute, 가로 세로 크기는 100%로 같은 사이즈를 지정합니다. 이렇게 하면 카드 앞뒤 같은 클래스명(side)을 사용하고 있기 때문에 앞뒤면을 형성하고 있는 <div>태그는 겹쳐 보일 수 밖에 없습니다. 

 

 

④ 카드 뒷면 작업

 

카드 뒷면 작업을 해야합니다. 카드 원래 크기는 side라는 클래스를 이용했기에 필요없고 뒷면에 대한 클래스명을 하나더 추가하고(클래스명 back) 여기서 작업합니다. 

색이나 글씨타입 크기등은 원하는 대로 만들어 줍니다. 

 

 

이렇게 작업을 해주고나니 다음 그림과 같이 문제점이 발생이 됩니다. 

뒷면 글씨여야 하기에 글씨가 뒤집혀 있어야 하는데 정글씨로 보이면서 글씨만 180도로 회전을 합니다. 그림이 안보인다는 거죠.    

 

 

상기 Success Way를 일단 180도로 돌려놓아야 됩니다. transform을 적용해 줍니다. 

 

 

 

즉, 상기 Success Way가 카드 뒷면에 쓰여져야 하고 카드 앞면은 그림이어야 합니다. 지금은 카드에 마우스를 올리면 Suceess Way만 회전합니다. 즉, Success Way도 뒷면이 보이고 순서를 바꾸어서 그림을 작업해도 뒷면이 보이는 현상인데 CSS에서 이를 해결하는 속성이 backface-visibility라는 속성입니다. 속성값으로 hidden을 적용해 줍니다. 

 

⑤ backface-visibility: hidden

 

이 속성은 전체를 아우르는 클래스명에 적용해줍니다. 여기서는 side 클래스명에 적용합니다. 그러면 이제는 그림이 위로 올라와 있습니다만 문제점으로 Success Way 글씨는 보이지 않고 그림만 살아 있습니다. 

 

 

이는 hover가 가리키는 지점은 side와 back이 아닌 부모인 card클래스에 지정을 해줬기 때문에 자식들( side와 back)이 회전하는 것을 보존하라는 속성을 같이 지정해 줘야합니다. 

 

⑥ transform-style: preserve-3d

 

이렇게 이해하면 되겠습니다. 자식요소들이 회전하는 개념은 3d이고 그에 대한 보존(preserve)을 위한 속성값이라고 보면 되겠습니다. 

 

 

이렇게 적용하면 카드회전이 잘되는 것을 확인할 수 있습니다. 

 

전체 CSS코드는 다음을 참조하세요 

 

* {padding: 0; margin: 0;}

#img {
  width: 200px; height: 300px;
}

.card-container { /* 다운받은 이미지의 원래파일 크기로 맞춤 */
  position:relative;
  cursor: pointer;
  height: 300px; 
  width: 200px;
  margin:100px;  
}

.card { /* 이미지사이즈에 맞게 형성 */
  height: 100%;
  width: 100%;  
  position: absolute;
  transition: 1s ease-in-out; /* 2. 회전하는 전환과정 필요 */  
  /* 4-2-2. 자식태그 회전 보존 */
  transform-style: preserve-3d; 
}

.card:hover {
  transform: rotateY(180deg); /* 1. y축을 기준으로 180도 */
}

.side { /* 3-1. 앞면과 뒷면이 겹치게 position: absolute */
  position: absolute;
  width: 100%;
  height: 100%; /* 3-2. 여기까지 하면 THe Fool이 위로 올라감 */
  /* 4-2. 뒷면 안보이게 */
  /* 4-2-1. 그런데 뒷면은 사라졌지만 회전후 안보임. 이는 부모태그 자식보존 필요 */
  backface-visibility: hidden; 
} 

.back { /* 3. 뒷면 내용에 대해 초안을 만듦 */
  background-color: rgb(76, 45, 3);
  color: antiquewhite;
  font-size: 25px;
  text-align: center;
  line-height: 300px;
  /* 4-1. 글씨가 뒤집혀 있어야 함 */
  transform: rotateY(180deg);  
} 

/* 4. 문제점 발견 */
/* 4-1. 현재 뒷면 정글씨가 화면 표시 일단 back은 글씨가 반대여야 함 */
/* 4-2. 두 요소의 뒷면의 그림이 안보여야 함 */