[CSS] 3D 효과, transfrom 과 관련된 속성

transform 의 3d속성들

기본적으로 transfrom을 사용해 봤을테지만, 거의 2d 위주로 사용해 왔다.

그래서 3d 속성들에 대해 알아보고 기록하고자 한다.

익숙해질때까지 연습하자.

 

See the Pen 3d transform and transform-origin by builderous (@nyjchoi) on CodePen.

 

 

자세한 설명은 위의 코드펜에 주석으로 설명을 달았다.

 

정리하자면,

 

transform-origin : x축 y축;

이렇게 써주면 되는데,

기본값은 50% 50%d이다. 즉 대상의 딱 가운데가 중심인 것이다.

x축 left,right, center, %, 단위(px 등)

y축 : top, bottom, center, %, 단위(px 등)

 

그리고 3d의 원근값을 적용시키려면,

transfrom : perspective(거리);

이것이 먼저 이루어져야 translateZ값이나 rotateX, rotateY, rotateZ가 적용이된다.

거리는 숫자가 클수록 대상과 내가 보는 시점이 멀어지는것이고,

숫자가 작을 수록 가까워진다.

 

 

 

See the Pen 3d transform - transfrom-style, preserve-3d by builderous (@nyjchoi) on CodePen.

위 코드펜을 보면 알 수 있지만,

한번 더 정리 해보자.

 

transform-style: preserve-3d;

기본값은 transform-style: flat; 이다.

 

부모요소에도 3d 효과를 주고,

자식요소에도 3d 효과를 주었을 때,

 

기본 flat은,

부모 자식 모두 transfrom이 적용은 되는데,

자식이 3d 속성을 갖지 못한다는 것이다. 내 육안으로 봤을 때는,

자식이 부모요소 안에서 어느정도 변화가 일어나긴하지만, 그 원근감 즉 3d 효과가 사라지는 것이다.

이를 위해서,

부모요소에 transform-style: preserve-3d; 를 적용하면, 자식에게도 원근감이 생긴다.

 

위의 코드펜에서 저것을 지웠다 썼다 하며 확인해보면 차이를 알 수 있다.

단, 자식의 자식 즉, 자손의 요소에는 영향이 미치지 않으니, 자손에게 3d를 적용하려면,

그 자손의 부모에게 transform-style: preserve-3d; 를 적용하면 해결된다. 

 

 

마지막으로,

backface-visibility : visible; (기본값)을 알아보자.

backface-visibility: hidden;

말그대로, 뒷면을 보여주고 숨기고를 결정하는 것이다.

 

예제를 통해 보는 것이 제일 이해하기 쉽니다.

 

 

See the Pen transform 3D -backface-visibility by builderous (@nyjchoi) on CodePen.

위에서 주석처리한 backface-visibility 속성을 풀면 어떤 변화가 있는지 보면 알 수 있을 것이다.

 

이상 끝.