CSS3 2D Transforms

 

 

이 장에서는 다음과 같은 2D 변형 방법을 학습합니다.

translate()

rotate()

scale()

skewX()

skewY()

matrix()

 

팁 : 다음 장에서 3D 변형에 대해 배우게됩니다.

 

translate () 메서드

 

 

 

 

이 translate()메서드는 요소를 현재 위치에서 X 축 및 Y 축에 지정된 매개 변수에 따라 이동합니다.

 

다음 예제에서는 <div> 요소를 오른쪽으로 50 픽셀 이동하고 현재 위치에서 100 픽셀 아래로 이동합니다.

 

Example

div {

    -ms-transform: translate(50px, 100px); /* IE 9 */

    -webkit-transform: translate(50px, 100px); /* Safari */

    transform: translate(50px, 100px);

}