[HTML/CSS] 웹사이트를 재미있게 만드는 CSS3의 transform 속성들

Transform

<style>
    .transition {
        transform: rotate(45deg);    /* 회전 */
        transform: scale(2, 3);    /* 확대 축소 */
    }
</style>

rotate(45deg);

• 입력한 각도만큼 회전
• 음수도 입력 가능

scale(2, 3);

• 숫자는 비율을 의미
• width를 2배, height를 3배 확대

 

<style>
    .transition {
        transform: skew(10deg, 20deg);    /* 각도 변경 */
        transform: translate(100px, 200px);    /* 위치 변경 */
    }
</style>

skew(10deg, 20deg);

• x축 y축을 기준으로 입력한 각도만큼 비틂

translate(100px, 200px);

• 선택한 오브젝트의 좌표 변경

 

<style>
    .transition {
        -webkit-transform: translate(100px, 200px);    /* 크롬, 사파리 */
        -moz-transform: translate(100px, 200px);    /* 파이어폭스 */
        -ms-transform: translate(100px, 200px);    /* 익스플로러 9.0 */
        -o-transform: translate(100px, 200px);    /* 오페라 */
    }
</style>

prefix 접두사

• 다른 버전의 브라우저에서의 실행을 원할 경우