[CSS] 8. 트랜지션과 애니메이션(1) - transform(변형) 2

 

 

 

앞서서 우리는 CSS에서 사용되는 transform 속성에 대해서 전반적으로 살펴보았습니다. 이 transform 속성에서 사용되는 여러 종류의 함수들을 2차원, 3차원으로 분류하여 알아보기도 했습니다. 이제부터는 각각의 transform 속성의 함수들에 대해서 상세하게 알아보도록 하겠습니다. 

 

 

○ translate( ) 함수 - 요소 이동

 

translate( ) 함수는, x축이나 y축 또는 양쪽 방향으로 이동 거리를 지정하면, 해당 요소가 그만큼 이동하는 함수입니다. 사용하는 형태는 아래와 같습니다. 참고로 x값이 양수면 오른쪽으로, y값이 양수면 아래쪽으로 이동합니다.

 

transform: translate(tx, ty)
/* x축으로 tx만큼, y축으로 ty만큼 이동 */

transform: translate3d(tx, ty, tz)
/* x축으로 tx만큼, y축으로 ty만큼, z축으로 tz만큼 이동 */

trnasform: translateX(tx)
/* x축으로 tx만큼 이동*/

transform: translateY(ty)
/* y축으로 ty만큼 이동 */

transform: translateZ(tz)
/* z축으로 tz만큼 이동 */

 

아래와 같이 도형에 마우스를 올렸을 때, 이미지가 이동하도록 처리해 보겠습니다. 

 

/* 생략 */

#movex:hover {
    transform: translateX(50px); 
    }
      
#movey:hover {
    transform: translateY(20px);
    }
      
#movexy:hover {
    transform: translate(10px, 20px);  
    }

 

 

---

 

 

○ scale( ) 함수 - 요소 크기 확대, 축소

 

scale( ) 함수는 특정 웹 요소를 확대 또는 축소하는 함수입니다. 파라미터의 인자값이 1을 기준으로 1보다 크면 확대되고, 1보다 작으면 축소됩니다. 만일 인자 값이 2라면 2배가 확대되고, 0.5면 0.5배만큼 축소되는 구조입니다. 

 

transform: scale(sx, sy)
/* x축으로 sx만큼, y축으로 sy만큼 확대. 인자 값이 1개이면 동일하게 적용 */

transform: scale(sx, sy, sz)
/* x축으로 sx만큼, y축으로 sy만큼, z축으로 sz만큼 확대 */

transform: scaleX(sx)
/* x축으로 sx만큼 확대 */

transform: scaleY(sy)
/* y축으로 sy만큼 확대 */

transform: scaleZ(sz)
/* z축으로 sz만큼 확대 */

 

이번에도 예제를 통해 살펴봅시다. 마우스를 올려두면 크기가 변형되도록 만들어 보겠습니다. 

 

/* 생략 */

#scalex:hover{
    transform: scaleX(2); 
    }
      
#scaley:hover{
    transform: scaleY(1.5);
    } 

#scale:hover{
    transform: scale(0.7); 
    }