Transform 3D

요소에 3차원 변환효과를 다루는 방법에 대하여 알아보자.

Perspective (투영점)

보고 있는 사람의 위치를 추정하여 투영점을 명시하면 3D 환경을 만들 수 있습니다. 즉, 멀리 떨어진 사물은 작게, 가까이 있는 사물은 크게 만들어서 원근감을 주는 효과입니다.

perspective property

원근효과를 위한 요소의 상위요소에 perspective 속성을 지정하는 방법으로 원근감의 거리를 값으로 지정합니다.

하위 요소들에 동일한 원근효과를 적용하기에 용이합니다.

.container {
  width: 150px;
  height: 150px;
  border: 4px solid;
  margin: 100px;
  /* 원근효과를 위한 요소의 상위요소에 지정  */
  perspective: 300px;

  /* 원근효과의 기준점 */
  perspective-origin: 50% 50%;
}

.container .item {
  width: 150px;
  height: 150px;
  background-color: orange;
  transition-duration: 1s;
}

.container .item:hover {
  transform: rotateY(45deg);
}

perspective-origin

위의 코드와 같이 perspective와 관련된 속성으로 원근효과가 시작되는 기준점을 지정하는 속성으로 기본값은 50% 50%인 요소의 가운데에 해당하며 x축과 y축에 해당합니다.

perspective-origin: 50% 50%;

transform: perspective

하위 요소에서 개별적인 원근효과에 대한 투영점을 설정할 때는 하위요소의 transform 속성의 값으로 perspetive 함수를 주고, 괄호 안에 수치를 입력합니다.

.container {
  width: 150px;
  height: 150px;
  border: 4px solid;
  margin: 100px
}

.container .item {
  width: 150px;
  height: 150px;
  background-color: orange;
  /* 요소 정렬 기준 지정 */
  /* 기본값 요소 한가운데 */
  /* transform-origin: 50% 50%; */
    
  transition-duration: 1s;
  transform-origin: 100% 50%; 
}

.container .item:hover {
  /* 요소 정가운데 기준으로 회전 */
  /* transform: rotate(45deg); */
  transform: perspective(300px) rotateY(45deg);
}

transform-style

CSS에서 상위요소에서 이미 3차원 변환 효과가 적용되어 있다면 하위 요소에 3차원 변환 효과를 적용하는 것이 기본적으로 안되게 설정되어있다. 이를 위해 사용하는 속성이 바로 transform-style 속성이다.

주의할점은 자신의 첫 자식의 경우에만 적용이 된다는 점으로 필요한 경우 반복적으로 속성 값을 사용해야 합니다.

.container {
  width: 150px;
  height: 150px;
  border: 4px solid;
  margin: 100px;
  perspective: 300px;
}

.container .item {
  width: 150px;
  height: 150px;
  background-color: orange;
  transform: rotateY(45deg);
  /* transform-style: flat; 기본값으로 flat으로 위에서 설명한 하위 요소의 3차원 변환효과를 막는다. */
  transform-style: preserve-3d; /* 하위 요소의 3차원 변환효과를 적용하게 해준다. */
}

.container .item .box {
  width: 100px;
  height: 100px;
  background-color: royalblue;
  transform: rotateX(45deg);
}

backface-visibility

요소의 뒷면을 나타낼지 설정하는 속성입니다.

아래와 같이 활용하여 고도의 3차원 효과를 구현할 수 있습니다.