[CSS3] 엘리먼트의 위치 이동 (transform: translate)
-
관리자 /
2011.12.07 01:59 /
hit 3,874 추천
0
CSS3를 사용하여 위치를 이동시킬 수 있습니다.
5개의 대표 브라우저 모두가 이 속성을 지원합니다. 아직 제정되지 않은 기술이므로 속성 앞에 브라우저의 특성을 입력해야 합니다. 브라우저의 특성을 입력하는 방법을 모르신다면 CSS3 가이드북 페이지에서 브라우저의 특성 링크를 클릭하세요.
transform 속성을 사용하면 엘리먼트를 거의 자유롭게 번형시킬 수 있습니다. transform 속성은 rotate(), scale(), skew(), translate() 총 4개의 방법이 있으며 이 4개의 방법을 한 번에 쓸 수도 있습니다. 예를 들어 transform 속성에서 rotate()와translate()를 같이 쓰고 싶을 때 'rotate() translate()'로 입력하면 두 가지의 효과가 모두 적용됩니다. 여기에서는 transform 속성에서 translate()에 관한 방법을 설명할 것입니다. transform 속성에 관하여 간단하게 테스트하고 싶다면 여기를 클릭하세요. (WebKit 기반의 웹 브라우저에서만 사용 가능)
transform 속성의 방법 중 하나인 translate()는 엘리먼트의 위치를 이동시킬 때 사용할 수 있습니다. translate()에서 괄호 안의 내용은 가로의 위치, 세로의 위치를 입력하면 됩니다. 양의 값을 입력하면 아래쪽이나 오른쪽으로 이동하며 음의 값을 입력하면 위쪽이나 왼쪽로 이동합니다.
이처럼 입력하면 위의 이미지처럼 위치가 이동됩니다.
5개의 대표 브라우저 모두가 이 속성을 지원합니다. 아직 제정되지 않은 기술이므로 속성 앞에 브라우저의 특성을 입력해야 합니다. 브라우저의 특성을 입력하는 방법을 모르신다면 CSS3 가이드북 페이지에서 브라우저의 특성 링크를 클릭하세요.
transform 속성을 사용하면 엘리먼트를 거의 자유롭게 번형시킬 수 있습니다. transform 속성은 rotate(), scale(), skew(), translate() 총 4개의 방법이 있으며 이 4개의 방법을 한 번에 쓸 수도 있습니다. 예를 들어 transform 속성에서 rotate()와translate()를 같이 쓰고 싶을 때 'rotate() translate()'로 입력하면 두 가지의 효과가 모두 적용됩니다. 여기에서는 transform 속성에서 translate()에 관한 방법을 설명할 것입니다. transform 속성에 관하여 간단하게 테스트하고 싶다면 여기를 클릭하세요. (WebKit 기반의 웹 브라우저에서만 사용 가능)
transform 속성의 방법 중 하나인 translate()는 엘리먼트의 위치를 이동시킬 때 사용할 수 있습니다. translate()에서 괄호 안의 내용은 가로의 위치, 세로의 위치를 입력하면 됩니다. 양의 값을 입력하면 아래쪽이나 오른쪽으로 이동하며 음의 값을 입력하면 위쪽이나 왼쪽로 이동합니다.
.example-img {
border-radius: 5px;
-webkit-transform: translate(130px, 115px);
-moz-transform: translate(130px, 115px);
-o-transform: translate(130px, 115px);
-ms-transform: translate(130px, 115px);
}-webkit-transform: translate(130px, 115px);
-moz-transform: translate(130px, 115px);
-o-transform: translate(130px, 115px);
-ms-transform: translate(130px, 115px);
이처럼 입력하면 위의 이미지처럼 위치가 이동됩니다.