CSS의 transition(전환)와 transform(변환)에 대해서 알아보자

transition : 전환효과

transition이란?

• 요소의 전환(시작과 끝) 효과를 지정하는 단축속성
• 속성명(transition-property), 지속시간(transition-duration), 타이밍함수(transition timing function), 대기시간(transition-delay)이 있다

✨ 속성명(transition-property)

• all : 모든 css에 적용
• 속성이름 : 전환효과를 사용할 속성 이름 명시
  

✨ 지속시간(transition-duration) : 전환효과의 지속시간을 지정(필수 포함 속성)

• os : 전환효과 없음
• 시간 : 지속시간(s)을 지정

✨ 타이밍함수(transition timing function) : 전환효과의 타이밍(Easing) 함수를 지정

• ease : 느리게-빠르게-느리게
• linear : 일정하게
• ease-in : 느리게-빠르게
• ease-out : 빠르게-느리게
• ease-in-out : 느리게-빠르게-느리게

✨ 대기시간(transition-delay) : 전환효과가 몇 초 뒤에 시작할지 대기 시간을 지정

• os : 대기시간 없음(기본값)
• 시간지정 가능
• transition : 1s .5s

tranform : 변환효과

tranform : 변환효과란?

• 2D 변환 함수, 3D 변환 함수

✨ 2D 변환 함수(이동, 크기, 회전, 기울임)

• translate(x, y) : 이동 (x축, y축)
• translateX(x) : 이동 (x축)
• translateY(y) : 이동 (y축)
• scale(x, y) : 크기(x축, y축)
• rotate(degree) : 회전(각도)
  • transform : rotate(45deg);
• skewX(x) : 기울임(x축)
• skewY(y) : 기울임(y축)
  • transform : skewX(45deg);

✨ 2D 변환 함수의 예시

• transform : translate();
  
• transform : translateX();
  
• transform : translateY();
  
• transform : scaleX();
  
• transform : scale();
  

✨ 3D 변환 함수(이동, 크기, 회전, 기울임)

• rotateX(x) : 회전(x축), 단위 deg
• rotateX(y) : 회전(y축), 단위 deg
• perspective(n) : 원근법(거리), 단위 px

✨ 3D 변환 함수의 예시

• transform : rotateX();
  
• transform : rotateY();
  
• transform : perspective() rotateX();
  
• transform : perspective() rotateY();
  
• transform : perspective() rotateX() rotateY;
  
  

✨ 그 외

• perspective(함수가 아닌 속성)

  • 하위 요소를 관찰하는 원근 거리를 지정
  • 단위 : px 등으로 지정
  • perspective 속성과 함수의 차이점
    속성) perspective: 600px; > 적용대상이 관찰대상의 부모에 부여
    함수) transform: perspective: )600px) > 적용대상이 관찰대상 그 자체

• backface-visibility : 3D 변환으로 회전된 뒷면 숨김 여부

  • visible : 뒷면 보임
  • hidden : 뒷면 숨김

  이미지 출처는 패스트 캠퍼스 온라인 강의 " 한 번에 끝내는 프론트엔드 개발 초격차 패키지 online"의 박영웅 강사님 강의입니다.