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

CSS3 2D Transforms

· 8년 전 · 1539

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

}

댓글 작성

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

로그인하기

게시글 목록

번호 제목
2952
2951
2950
2949
2948
2947
2946
2945
2944
2943
2942
2941
2940
2939
2938
2937
2936
2935
2934
2933
2932
2931
2930
2929
2928
2927
2926
2925
2924
2923