CSS 변환 3D 변환

    2018-03-21 01:19:58 작성

    3D 변환

    transform 속성과 perspective 속성을 사용하여 3D 변환을 할 수 있습니다.

    3D변환 transform 메서드
    메서드 설명
    translate3d(x, y, z) 요소를 x축 y축 z축으로 이동 변환 합니다.
    translateX(x) 요소를 x축 으로 이동 변환 합니다.
    translateY(y) 요소를 y축으로 이동 변환 합니다.
    translateZ(z) 요소를 z축으로 이동 변환 합니다.
    scale3d(x, y, z) 3D 크기 변형을 정의합니다.
    scaleX(x) 요소의 x축 값을 지정하여 크기를 변형합니다.
    scaleY(y) 요소의 y축 값을 지정하여 크기를 변형합니다.
    scaleZ(z) 요소의 z축 값을 지정하여 크기를 변형합니다.
    CSS에는 두께라는 개념이 없습니다.
    rotate3d(x, y, z, angle) 요소를 회전합니다.
    rotateX(angle) x축을 중심으로 회전시킵니다.
    rotateY(angle) y축을 중심으로 회전시킵니다.
    rotateZ(angle) 2D Transform의 rotate() 메서드와 동일합니다.
    perspective(n) 요소를 바라보는 원근을 입니다.
    화면을 바라보는 사용자와 얼마나 멀리에 위치 하는가를 나타냅니다.
    matrix(...) 4x4 16개의 값의 행렬을 사용하여 3D변환을 정의합니다.


    translate3d 메서드

    transform: translate3d(X,Y,Z);
    transform: translateX(X); /*2D와 동일*/
    transform: translateY(Y); /*2D와 동일*/
    transform: translateZ(Z);

    X축, Y축, Z축으로 이동 변환 합니다.
    px, em 등의 단위를 사용할수 있고, %는 현제 요소의 크기가 100% 입니다. (음수 가능)

    Z축 거리감을 나타냅니다 먼거리에 있는 대상이 가까이 보았을때 커보이는 느낌 정도로 이해하시면 됩니다.



    scale3d 메서드

    scale3d(X,Y,Z);
    transform: scaleX(X); /*2D와 동일*/
    transform: scaleY(Y); /*2D와 동일*/
    transform: scaleZ(Z);

    X축, Y축, Z축으로 크기를 변환합니다.
    요소의 원래 크기가 기준이며 1입니다. 소수점으로 축소 됩니다.
    Z축은 transform: translateZ(Z); 로 이동했을때 확대/축소 되는 비율입니다.



    rotate3d 메서드

    rotate3d(X,Y,Z,angle);
    transform: rotateX(angle);
    transform: rotateY(angle);
    transform: rotateZ(angle); /*2D rotate() 와 동일*/

    X축, Y축, Z축으로 회전 변환합니다.