transform

CSS3의 transform 속성은 Flash 나 JavaScript를 사용하지 않고 요소를 애니메이션 시키거나 시각적 및 상호 작용의 효과를 풍부하게 제공하고 있습니다.

그 중 translate () 함수는 기본적으로 X 축과 Y 축을 따라 지정된 거리만큼 요소를 이동시킬 때 사용합니다.

기본 코딩은 그렇게 복잡하지 않습니다.

transform：translate(x, y)、translateX()、translateY()、translateZ()、translate3d() 등의 함수로 이동 거리를 지정합니다.

 

translate() 속성transform:translate()transform:translateX()transform:translateY()transform:translateZ()

translate (x, y) 함수는 요소를 왼쪽에서부터 x거리(距離), 위에서부터 x 거리만큼 상대적으로 위치를 정하거나, 이동 및 재배치를 지정합니다. Y 방향의 거리는 생략할 수 있지만, 이 경우의 Y방향의 거리는 "0"이 됩니다.

translateX(거리) 함수는 좌우(수평 방향)의 이동 거리 값을 지정합니다.

translateY(거리) 함수는 상하(수직 방향)의 이동 거리 값을 지정하십시오.

translateZ(거리) 함수는 Z 방향의 거리로 이동을 지정합니다. 이 함수는 백분율 값으로 지정할 수 없습니다. 백분율로 값을 지정해도 "0"이 됩니다.

translate() 구문

▼　아래와 같이 요소를 이동시키기 위해 X 축과 Y 축에 따라 요소의 이동 거리를 나타내는 xy 매개 변수를 지정합니다.

transform:translate(200px,0);

div.sample{ 　height:100px; 　width: 100px; 　background:#d6d4d4; 　border-radius:50%; 　box-shadow:inset 0 2px 45px #2e2d2d; 　}   div.sample:hover { 　transform:translate(200px,0); 　-webkit-transform:translate(200px,0); 　-moz-transform:translate(200px,0); 　-ms-transform:translate(200px,0); 　-o-transform:translate(200px,0); 　}

▼　아래의 원형에 마우스 오버하면 오른쪽에 200px 이동하게됩니다.

translate ()을 리셋하려면 "transform : none;"을 지정합니다.

또한 transform : translate ()과는 별도로 "position : absolute"를 사용하여 요소를 top과 left로 이동시키는 방법도 있지만, transform : translate ()와 비교해 어느 쪽이 좋은지는 주어진 환경에 따라 다른 것 같습니다.

요소의 중앙 집결 지정하기

[CSS]　translate(-50%,-50%);

.parent{ 　position:relative; 　} .child{ 　position:absolute; 　top:50%; 　left:50%; 　transform: translate(-50%,-50%); 　background-color:#666; 　}