테스트 사이트 - 개발 중인 베타 버전입니다

CSS3 2D Transforms

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);

}

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.
글쓰기