【CSS】transform 속성 : 요소의 표시 위치를 이동시키는 translate

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

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

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

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

translate() 속성
transform:translate()	translate (x, y) 함수는 요소를 왼쪽에서부터 x거리(距離), 위에서부터 x 거리만큼 상대적으로 위치를 정하거나, 이동 및 재배치를 지정합니다. Y 방향의 거리는 생략할 수 있지만, 이 경우의 Y방향의 거리는 "0"이 됩니다.
transform:translateX()	translateX(거리) 함수는 좌우(수평 방향)의 이동 거리 값을 지정합니다.
transform:translateY()	translateY(거리) 함수는 상하(수직 방향)의 이동 거리 값을 지정하십시오.
transform:translateZ()	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;
　　}

vertical and centering

스폰서 링크