CSS 의 transform 함수 이해하기 transform-origin / translate / skew/ rotate

CSS 의 transform 은 객체의 모양을 변형/이동/회전 등을 할 수 있는 속성으로서,

javascript 를 이용하지 않고도 CSS 만으로 개체의 변형/이동/회전을 구현할 수 있다. 

다만, 표준이 아니기 때문에 호환성을 위해서는 밴더프리픽스 (webkit, moz, ms ) 를 붙여주어

각각 정의를 해주어야 다른 브라우저에서도 동작하게 된다.

프리픽스별 벤더구분은 아래와 같다. 

-webkit-transform  // 크롬, 사파리

-moz-transform     // 파이어폭스

-ms-transform       // 익스플로러

-o-transform         // 오페라

위치이동의 경우 아래와 같이 정의하면 된다. 

-webkit-transform : translate(50px,50px);  

-moz-transform : translate(50px,50px);     

-ms-transform : translate(50px,50px);       

-o-transform : translate(50px,50px);         

사용가능한 함수는 여러가지가 있는데, 다음과 같다.

-webkit-transform:translate(50px,50px);  // 위치이동  

-moz-transform:scale(1.5,1.5);              // 크기변경

-ms-transform:rotate(20deg);              // 회전

-o-transform:skew(10deg,10deg);         // 비틀기

다음과 같이 여러가지 속성을 중복해서 사용할 수도 있다.

<style type="text/css">

div{

    background:#900;

    margin:50px;

    padding-top:20px;

    width:100px;

    height:80px;

    color:#fff;

    font-size:12px;

    text-align:center;

}

.translate{

    transform:translate(50px,50px) rotate(-10deg) scale(1.5,1.1);

    -moz-transform:translate(50px,50px) rotate(-10deg) scale(1.5,1.1);

    -webkit-transform:translate(50px,50px) rotate(-10deg) scale(1.5,1.1);

    -o-transform:translate(50px,50px) rotate(-10deg) scale(1.5,1.1);

}

</style>

 

<div class="translate">translate</div>

 

이때, 변형, 회전 등의 기준이되는 기준점을 설정하게 되는데, transform-origin 속성을 이용한다.

div {
    -ms-transform: rotate(45deg); /* IE 9 */
    -ms-transform-origin: 20% 40%; /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    -webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    transform-origin: 20% 40%;
}

기본값은 50% 이다  ->  transform-origin: 50% 50%; 

문법은 다음과 같다.

transform-origin: x-axis y-axis z-axis|initial|inherit;

Property Value	Description
x-axis	Defines where the view is placed at the x-axis. Possible values: left center right length %
y-axis	Defines where the view is placed at the y-axis. Possible values: top center bottom length %
z-axis	Defines where the view is placed at the z-axis (for 3D transformations). Possible values: length
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

아래 링크를 통해 웹페이지 상에서 직접 테스트 해볼 수 있다.

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transform-origin

출처 :

http://dev.500cc.kr/147

http://www.w3schools.com/cssref/css3_pr_transform-origin.asp