<CSS 기초> 16. 3D 기본

 

1. 3D로 만들기

* 비틀기

  - 간단하게 옆으로 살짝 비틀어진 카드를 만든다고 가정하자. 그러면 우리는 다음과 같이 작성할 수 있다.

transform: rotateY(45deg);

 - 3d 형태로 옆으로 45도 돌린 속성을 주기위해 원하는 곳에 위와 같은 트랜스폼 속성을 줄 수 있다.

 

 - 하지만 실제로 이렇게 해보면 3D라 하기엔 어색하고 납작하다. 이 때 필요한 것이 perspectiv속성이다.

 

* 속성

 - 위의 부모태그를 3D공간으로 만들면 위의 카드가 3d처럼 보인다. 

perspective : 500px;

 - 500px은 눈에서의 거리라고 볼 수 있다. 즉 0에 가까워질수록 모양의 변화가 극대화되어 보인다.

 

 - 위의 속성에도 불구하고 또 다른 문제가 생긴다. 부모안에 여러개의 3D 카드들을 넣으면 각각이 조금씩 다르게 보인다. 부모태그가 3D공간이기 때문에 당연히 각각이 조금씩 눈에서는 다르게 보이는 것이다.

 

 - 각각이 같은 형태로 보이길 원한다면 perspective를 각각에게 주어야 한다.

transform: perspective(500px) rotateY(45deg);

 

2. 뒷면 만들기

 - 이번에는 카드에 텍스트가 있고 이를 호버할 때마다 180도 돌린다고 가정하자.

 

 - 이는 호버를 이용해서 자연스럽게 rotateY(180deg)를 주면 뒤집어 질 것이다. 그러나 뒷면의 구분없이 텍스트도 반전되어 보이게 된다.

 

 - 우리는 뒷면은 텍스트가 보이지않고 카드의 뒷면을 따로 보여주고 싶을 것이다.

 

 - 이를 구현하기 위한 순서는 다음과 같다.

 

  ① 3D공간을 가진 world라는 클래스를 가진 태그 안에 card라는 클래스를 가진 태그를 넣고 이 안에 앞면과 뒷면을 각각 디자인하여 넣는다. 이 때 공통되는 디자인은 card-side 클래스에 넣는다. (world > card > card-side)

  ② 앞면과 뒷면을 포개기 위해 card-sid에 absolute 값을 준다.

  ③ 앞면과 뒷면에 각각 card-side-front 와 card-side-back 클래스를 추가하고 각각의 스타일에 색을 넣고 앞면에는 z-index를 1을 주어 위에 보이도록하고, 뒷면에는 rotateY(180deg)를 준다.

  ④ 이제 card 클래스를 가진 태그에게 뒤집는 애니메이션을 주면 된다.

.world {
	perspective: 500px;
}
.card{
	transform-style: preserve-3d;
	transition: 1s;
	transform: rotateY(0deg);
	transform-origin: left;
}

.world:hover .card {
	transform: rotateY(-180deg);
}

.card-side{
	backface-visibility: hidden;
}

.card-side-front {
	background: white;
	z-index: 1;
}

.card-side-back {
	background: blue;
	transform: rotateY(180deg);
}

코드를 하나하나 살펴보자.

 - world에는 3D공간을 만들기 위해 perspective 속성을 주었다.

 

 - transform-style : preserve-3d 는 손자태그가 부모태그로 하여금 그 위의 perspecitve속성을 인식하도록 하는 역할이다.

 

 - 호버에서 돌리기 위해서 직관적으로 rotateY를 0deg라고 입력해 주었다.

 

 - transform-origin: left를 줌으로써 문처럼 보이게 하였다.

 

 - backface-visibility: hidden을 이용하여 뒷면이 되었을 때 완전히 숨기도록 하였다. 이렇게해야 뒤집어졌을 때 앞면은 정상적으로 가려진다. 

 

 

3. 문제해결하기

 - 위의 코드를 작성하면 크롬에서는 매우 정상적으로 작동하지만 그 외의 브라우저에서는 backface-visibility가 정상적으로 작동하지 않을 수 있다.

 

* 사파리

 - 사파리의 경우에 대비하기위해 다음을 작성할 수 있다.

-webkit-backface-visibility: hidden;
backface-visibility: hidden;

 : backface 위에 작성한 이유는 크롬과 같은 브라우저에서는 마지막에 표준화된 것을 인식하도록 한 것이다.

 : - - 가 앞에 붙어 있는 것은 아직 표준화 되지 않은 새로나온 스펙에 대해 임의로 붙여서 사용하고 있는 것이다. 사파리에서는 -webkit- 오페라에서는 -o- 익스플로러는 -ms- 를 붙인다.

 

 

* 익스플로러

 - 익스플로러는 preserve 3d 자체가 작동이 안된다. 즉 감싸는 부모(카드)를 지우고 앞면과 뒷면을 각각 돌리는 방식을 사용해야한다. 이 때 앞면은 0도에서 180도가 되고 뒷면은 180도에서 360도가 되도록 작성해야한다.

 

 

 

 

 

 

 

참고

 

이 글은 인프런에서 관련 강의를 구매하여 수강 후 공부하며 작성한 글입니다.

모든 내용과 코드 및 이미지는 직접 재구성하였습니다.

 

 

인터랙티브 웹 개발 제대로 시작하기 - 인프런