CSS 입문 | CSS3 변형 | 3D Transform

변형(Transform)

CSS3에서는 transform 속성을 사용하여 HTML 요소의 모양, 크기 위치 등을 입체적으로 변형시킬 수 있다.

CSS3 3D 변형(transform) 지원 버전

CSS3 3D 변형(transform)을 지원하는 주요 웹 브라우저의 버전은 다음과 같다.
또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했다.

3D 변형(transform)

3D 변형(transform)을 위해 제공되는 메소드(method)는 다음과 같다.

1. rotate()
2. translate()
3. scale()
4. matrix()
5. perspective()

rotateX() 메소드

rotateX() 메소드는 해당 요소를 주어진 각도만큼 x축을 기준으로 회전시킨다. 주어진 각도가 양수이면 x축 양의 방향으로, 음수이면 x축 음의 방향으로 회전시킨다.

<style>
    #rotate_01 {
        -webkit-transform: rotateX(20deg);
        transform: rotateX(20deg);
    }
</style>

rotateY() 메소드

rotateY() 메소드는 해당 요소를 주어진 각도만큼 y축을 기준으로 회전시킨다.
주어진 각도가 양수이면 y축 양의 방향으로, 음수이면 y축 음의 방향으로 회전시킨다.

<style>
    #rotate_01 {
        -webkit-transform: rotateY(20deg);
        transform: rotateY(20deg);
    }
</style>

rotateZ() 메소드

rotateZ() 메소드는 해당 요소를 주어진 각도만큼 z축을 기준으로 회전시킨다.
주어진 각도가 양수이면 z축 양의 방향으로, 음수이면 z축 음의 방향으로 회전시킨다.

<style>
    #rotate_01 {
        -webkit-transform: rotateZ(20deg);
        transform: rotateZ(20deg);
    }
</style>

translate3d() 메소드

translate3d() 메소드는 현재 위치에서 해당 요소를 주어진 x축과 y축, z축의 거리만큼 이동시킨다.
주어진 거리가 양수이면 해당 축의 양의 방향으로, 음수이면 해당 축의 음의 방향으로 이동시킨다.

<style>
    #trans_01 {
        -webkit-transform: translate(100px, 50px);
        -ms-transform: translate(100px, 50px);
        transform: translate(100px, 50px);
    }
    #trans_02 {
        -webkit-transform: translate3d(100px, 50px, -150px);
        transform: translate3d(100px, 50px, -150px);
    }
</style>

rotate3d(), translate3d(), scale3d() 메소드와 같이 입체적으로 보여지는 3D 변형에 관련된 메소드는 원근감을 표현할 기준을 명시해야 한다.
위의 예제에서는 perspective() 메소드를 사용하여 원근감을 표현하기 위해 사용할 픽셀 수를 500px로 설정하고 있다.

CSS3 3D transform 속성

CSS3 3D transform 메소드