css 전환(Transitions)과 변환(Transforms)

전환(Transitions) : 전환 효과를 설정하여 중간에 애니메이션을  넣어준다

transition-property :  전환 효과를 부여할 css속성에 이름을 설정한다.
기본값:all
transition-property의 속성값 
1 all : 해당 요소에 모든 css속성에 전환 효과를 부여한다.
2 속성이름:  명시한 css속성에만 전환 효과를 부여한다

transition-duration : 전환 효과의 동작 시간을 설정한다
기본값:0s 

transition-duration의 속성값 
숫자를 이용하여 동작시간을 명시한다 ex) transition-duration : 5s;

transition-delay : 전환 효과의 대기시간을 설정한다
기본값:0

transition-delay의 속성 값:
숫자를 이용하여 동작시작을 지연시킨다  ex) transiton-delay : 3s;

transition-timing-function : 타이밍 함수를 지정한다 

타이밍 함수란? :  전환효과(transition)가 동작할 때 동작 시작과 끝의 속도를 설정하는 것을 의미함

기본값 : ease 

transition-timing-function의 속성값 :
ease : 애니메이션이 동작할때 시작 구간 = 빠르게, 끝 구간  = 느리게 동작한다.
linear: 애니메이션이 동작할때 모든 구간이 일정하게 동작한다.
ease-in: 애니메이션이 동작할때 시작 구간이 느리고 점점 빨라진다.
ease-out:애니메이션이 동작할때 시작 구간이 빠르고 점점 느려진다.
ease-in-out : 애니메이션이 동작할때 시작 구간 = 느리게, 중간구간 = 빠르게, 끝 구간 = 느리게 동작한다.

ex)

<style>
.box1{
  width: 100px;
  height:100px;
  background-color: red;
}
.box1:hover{
  width: 300px;
  height: 300px;
  
  transition-duration: 5s;  /*전환 효과의 동작시간을 설정 */
  transition-property: width;/* 전환 효과를 부여할 css속성 설정 */
  transition-delay: 2s; /*전환 효과 동작 대기시간 설정 */
  transition-timing-function: linear; /*전환 효과 동작시 속도 설정 */
}
.box2{
  width: 100px;
  height:100px;
  background-color: blue;
}
.box2:hover{
  width: 300px;
  height: 300px;
  
  transition: 5s 2s width linear; /*box1과 동일하게 동작하고 transiton-duration,property,delay,timing-function을 한번에 설정한 예시 */
} 
  </style>
  <div class="box1">box1</div>
  <div class="box2"></div>

위코드에서 .box2:hover부분을 보면  단축 속성으로 transition을 한 번에 설정했는데 이때 duration과 delay의 표기법이 둘다s가 포함되어 있어 어떤 게 duration인지 어떤 게 delay인지
모를 수 있다고 생각하겠지만 브라우저는 앞에명시한 s를 duration 뒤에 명시한 s를 delay로 인식한다.

변환(transform) : 함수를 이용하여 요소의 변환 효과를 설정한다.

2D 변환(transform) 함수모음  (큰 틀로 보면 요소에 이동, 회전, 기울임, 크기를 설정한다)

translate(x, y): 요소를 x값(가로축), y값(세로축) 만큼 이동시킨다 이때 단위는 px ,%,em 등등을 사용한다
translateX: 요소를 x값(가로축)만큼 이동시킨다. 이때 단위는 px,%,em 등등을 사용한다
translateY: 요소를 y값(세로축)만큼 이동시킨다. 이때 단위는 px,%,em 등등을 사용한다.
scale(x, y): 요소를 x값(가로축), y값(세로축) 만큼 크기를 늘리고 줄인다 이때  숫자를 이용한 배수를 사용한다
scaleX: 요소를 x값(가로축)만큼 크기를 늘리고 줄인다 이때 숫자를 이용한 배수를 사용한다 
scaleY: 요소를 y값(세로축)만큼 크기를 늘리고 줄인다 이때 숫자를 이용한 배수를 사용한다.
rotate(deg): 요소를 ()안에 각도 값만큼 회전시킨다 이때 deg라는 단위를 사용하는데 deg는 각도를 나타낸다
skew(x-deg, y-deg) : 요소를 x-deg값(가로축), y-deg값(세로축) 만큼 기울인다 이때 deg는 각도를 나타낸다.
skewX(x-deg): 요소를 x-deg값(가로축)만큼 기울인다.
skewY(y-deg): 요소를 y-deg값(세로축)만큼 기울인다.

이때  모든함수에 x값은 양수일 때=오른쪽 음수일 때=왼쪽 y값은 양수일 때=아래쪽 음수일 때=위쪽으로 이동한다

ex)

 <style>
div{
  width: 100px;
  height: 100px;
  margin: 10px;
  /* 박스들이 공통적으로 가지는 크기와 외부여백 */
}
.box1{
  transform:translate(300px,30px);
  background-color: red;
  /* translate를 적용했을때 이동한 예시 */
}
.box2{
  transform: translateX(200px);
  background-color: orange;
}
/* translateX를 적용했을때 이동한 예시 */
.box3{
  transform: translateY(-100px);
  background-color: yellow;
  /* translateY를 적용했을때 이동한 예시 */
}
.box4{
  transform: scale(2,2);
  background-color: green;
  /* scale을 적용했을때 늘어난 크기에 대한 예시 */
}
.box5{
  transform:scaleX(3);
  background-color: blue;
}
/* scaleX를 적용했을때 늘어난 크기에 대한 예시 */
.box6{
  transform: scaleY(2);
  background-color: brown;
}
/* scaleY를 적용했을때 늘어난 크기에 대한 예시 */
.box7{
  transform: skew(30deg,10deg);
  background-color: blueviolet;
}
/* skew를 적용했을때 요소가 기울어진 예시 */
.box8{
  transform: skewX(30deg);
  background-color: pink;
}
/* skewX를 적용했을때 요소가 기울어진 예시 */
.box9{
  transform: skewY(20deg);
  background-color: black;
/* skewY를 적용했을때 요소가 기울어진 예시 */
}
.box10{
  transform:rotate(45deg);
  background-color: aqua;
  /* rotate를 적용했을때 요소가 회전한 예시 */
}

  </style>
  <div class="box1">translate(x,y)</div>
  <div class="box2">translateX</div>
  <div class="box3">translateY</div>
  <div class="box4">scale(x,y)</div>
  <div class="box5">scaleX</div>
  <div class="box6">scaleY</div>
  <div class="box7">rotate(deg)</div>
  <div class="box8">skew(x-deg,y-deg)</div>
  <div class="box9">skewX(x-deg)</div>
  <div class="box10">skewY(y-deg)</div>

3D 변환 함수 모음
translate(x,y,z): 요소를 x값(가로축), y값(세로축) z값만큼 이동시킨다 이때 단위는 px ,%,em 등등을 사용한다
translateZ: 요소를 z값만큼 이동시킨다. 이때 단위는 px,%,em 등등을 사용한다
scale(x, y, z): 요소를 x값(가로축), y값(세로축) z값만큼 크기를 늘리고 줄인다 이때  숫자를 이용한 배수를 사용한다
scaleZ: 요소를 z값 만큼 크기를 늘리고 줄인다 이때 숫자를 이용한 배수를 사용한다 
rotateX(deg): 요소에 x축을 기준으로 () 안에 각도 값만큼 회전시킨다 이때 deg라는 단위를 사용하는데 deg는 각도를 나타낸다
rotateY(deg): 요소에 y축을 기준으로 ()안에 각도 값만큼 회전시킨다. deg를 사용한다
rotateZ(deg): 요소에 z축을 기준으로 () 안에 각도 값만큼 회전시킨다 deg를 사용한다.
perspective(n): n에 값만큼 원근감을 설정한다 이때 ()안에 n값으로는 px,%,em 등등의 단위가 들어간다.