[ CSS ] 비슷해서 헷갈리는 transform, translate, transition

Style줄 때 기계처럼 적용하는 transform, translate, transition 

단어들이 비슷해서 가끔 적용 시 헷갈릴 때가 있다🥲

 

그래서 간단히 정리하고 넘어가도록 한다 !

 

 

transform : element 변형 시 사용
translate : transform에 속해있는 translate는 transform과 같이 사용할 수 있다 ( scale, rotate 같은 애 )
transition : element 변형 시 속도, 시간, 횟수 들을 조절

 

transform

Element를 변경시킬 때 사용 ( 위치 이동 , 회전 , 크기 조절 등 )

 

span{
	transform : 변형속성 ( 값 , 값2 )
	// 여려개 속성 변경시
	transform : 변형속성1 ( 값 ) 변형속성2 ( 값 , 값2 ) ....
}

 

transform 내 사용

translate , scale , rotate 등..

translate

Element를 이동시킬 때 사용

X축이나 Y축 기준으로 한 값만 적용시키고 싶을 때는
translateY , translateY를 사용하던가 translate에서 원하지 않는 값에 0을 사용해도 된다

span { 
	transform : trnaslate (x축기준 이동시킬 값 , y축 기준 이동 시킬 값)

	// 현재 element 위치 기준 x축,y축 으로 100px씩 이동 시키는 예제
	transform : translate ( 100px, 100px )
    
    // Y축만 이동
	transform : translate ( 0 , 100px ) 
    // 혹은
    transform : translateY ( 100px )
}

transition

Element의 CSS 속성을 변경할 때 부드럽게 움직이거나

원하는 대로 적용되도록 애니메이션 속도, 반복 횟수, 조절 등을 할 수 있다

div{
	width:100px;
    height:100px;
	background : red ;
    opacity : 1 ;
    /* transition으로 opacity를 3초에 걸쳐 변화시킨다 */
    transition : opacity 3s
}

//hover 했을때 사라지는 효과
div:hover{
	opacity : 0
}

 

hover시에 transition을 사용할 때 hover에 transition값을 주어도 서서히 변화는 효과가 적용되긴 하지만

오직 hover 될 때만 적용되고 mouse가 벗어날 때는 적용되지 않으므로

자체 element의 style에 transition값을 주는 편이 좋다

( 원하는 상황에 따라 다르겠지만 )