CSS 변환 3D 공간 이해

    2018-03-21 00:33:36 작성

    원근감

    3D변환을 하려면 3D 공간의 원근감을 지정하여야 합니다.
    다음 두가지 방법으로 원근감을 지정할 수 있습니다. 

    transform: perspective(n);
    		 transform 속성의 perspective 메서드로 설정합니다.
    해당 요소 개별 원근감을 지정합니다. 
    perspective: length|none;
    		 요소에 perspective 속성으로 설정합니다.
    지정한 요소의 하위 요소에 통일된 원근감을 지정합니다.
    기본값은 none이며 0과 같습니다.

    perspective의 값으로 위의 예제에서는 600px과 150px을 주었는데 이 값은 사용자로 부터 요소까지의 거리라고 생각하세요.
    값이 클수록 대상(요소)이 멀리 있으므로 심도가 낮습니다.
    값이 작을수록 대상(요소)이 가까이 있으므로 심도가 깊습니다.

    위의 두가지 형식은 모두 3D공간을 트리거 하지만 차이점이 있습니다.
    먼저 transform: perspective() 메서드는 요소 1개를 적용하는데 편리하지만 여러요소에 적용하려면 예상대로 정렬되지 않습니다.
    여러요소에 동일한 변형을 사용하면 각 요소마다 자체 소실점이 생깁니다.
    이 문제를 해결하려면 perspective 속성을 사용하여 하위 요소에 대해 동일한 3D 공간을 공유할 수 있습니다.


    perspective-origin

    perspective-origin: x-axis y-axis|initial|inherit;

    사용자가 3D 공간의 요소를 보는 위치를 정의합니다.
    3D 요소에 원근감이 적용되어야 합니다.

    x-axis X축을 기준으로 시점을 정의합니다.
    left, center, right, length 의 값을 지정합니다.
    기본값 : 50%
    y-axis y축을 기준으로 시점을 정의합니다.
    top, center, bottom, length 의 값을 지정합니다.
    기본값 : 50%


    transform-style

    transform-style: flat|preserve-3d|initial|inherit;

    3D 공간에서 자식요소를 렌더링 하는 방법을 지정합니다.

    flat 기본값, 자식 요소는 3D 공간을 가지지 못합니다.
    preserve-3d 자식요소는 부모의 3D 공간을 공유하며, 독립된 변형이 가능합니다..


    backface-visibility

    backface-visibility: visible|hidden|initial|inherit;

    요소가 회전했을때 뒷면이 보여지는지 여부를 지정합니다.

    visible 기본값, 요소가 회전되었을때 뒷면(회전 후 뒷에서 보이는 면)이 보여진다.
    hidden 사용자 시점에서 요소가 회전되었을때 뒷면을 보이지 않게 합니다.