📍변형

사용자의 동작에 반응해 특정 요소의 크기나 형태가 변하는것

2차원 변형 : 웹 요소를 변형시킬 때 단순히 수평이나 수직으로 이동하고 회전하는 것
▪️ 크기와 각도만 지정하면 손쉽게 변형이 가능하다.
▪️ 2차원 좌표계에서 x축은 오른쪽으로 갈수록 값이 커지고 y축은 아래로 내려갈수록 값이 커진다.

3차원 변형 : x축과 y축에 원근감을 주는 z축을 추가해 변형시키는 것
▪️ z축은 앞뒤로 이동하는데 보는 사람 쪽으로 다가올수록 값이 더 커진다.

transform : 속성 다음에 변형 함수를 입력하는 형태로 사용된다.

변형함수

▪️ 2차원 변형 함수

변형함수	설명
translate (tx, ty)	지정한 크기만큼 x축과 y축으로 이동
translateX (tx)	지정한 크기만큼 x축으로 이동
translateY (ty)	지정한 크기만큼 y축으로 이동
scale (sx, sy)	지정한 크기만큼 x축과 y축으로 확대/축소
scaleX (sx)	지정한 크기만큼 x축으로 확대/축소
scaleY (sy)	지정한 크기만큼 y축으로 확대/축소
rotate (각도)	지정한 각도만큼 회전
skew (ax, ay)	지정한 각도만큼 x축과 y축으로 왜곡
skewX (ax)	지정한 각도만큼 x축으로 왜곡
skewY (ay)	지정한 각도만큼 y축으로 왜곡

▪️ 3차원 변형 함수

변형함수	설명
matrix3d (n [,n])	4 * 4 행렬을 이용해 이동과 확대/축소, 회전 등의 변환 지정
translate3d (tx, ty, tz)	지정한 크기만큼 x축, y축, z축으로 이동
translateZ (tz)	지정한 크기만큼 z축으로 이동
scale3d (sx, sy, sz)	지정한 크기만큼 x축, y축, z축으로 확대/축소
scaleZ (sz)	지정한 크기만큼 z축으로 확대/축소
rotate3d (rx, ry, rz, 각도)	지정한 각도만큼 회전
rotateX (각도)	지정한 각도만큼 x축으로 회전
rotateY (각도)	지정한 각도만큼 y축으로 회전
rotateZ (각도)	지정한 각도만큼 z축으로 회전
perspective (길이)	입체적으로 보일 수 있는 깊이 값 지정

▪️ translate 변형 함수 : 요소 이동 시키기

<style>
    .movex:hover { transform: translateX(50px);} 
    /* 마우스를 오버하면 오른쪽으로 50px 이동 */
    .movey:hover { transform: translateY(20px);} 
    /* 마우스를 오버하면 아래로 20px 이동 */
   .movexy:hover { transform: translate(10px, 20px);} 
   /* 마우스 오버하면 오른쪽으로 10px, 아래로 20px, 앞쪽으로 10px 이동 */
</style>

▪️ scale 변형 함수 : 요소 확대/축소 하기
괄호 안의 값이 1보다 크면 확대, 1보다 작으면 축소된다.

<style>
   .scalex:hover { transform: scaleX(1.2); } 
   /* 마우스를 오버하면 가로로 1.2배 확대 */
   .scaley:hover { transform: scaleY(1.5); } 
   /* 마우스를 오버하면 세로로 1.5배 확대 */
   .scale:hover { transform: scale(0.7); } 
   /* 마우스 오버하면 가로, 세로로 0.7배 확대 */
</style>

▪️ rotate 변형 함수 : 요소 회전하기
▫️ rotate 변형 함수는 일반적인 각도(degree)나 래디안(radian) 값을 사용한다.
▫️ 회전 각도가 양수일 경우, 시계 방향으로 회전하고 음수일 경우, 시계 반대 방향으로 회전한다.

/* 2차원 이미지 회전 */
<style>
     .rotate1:hover { transform: rotate(20deg); } 
     /* 시계 방향으로 20도 회전 */
     .rotate2:hover { transform: rotate(-40deg); } 
     /* 시계 반대 방향으로 40도 회전 */
</style>

/* 3차원 이미지 회전 */
<style>
    .rotatex { transform: rotateX(45deg); } 
    /* x축을 기준으로 시계 뱡향 45도 회전 */
    .rotatey { transform: rotateY(45deg); } 
    /* y축을 기준으로 시계 방향 45도 회전 */
    .rotatez { transform: rotateZ(45deg); } 
    /* z축을 기준으로 시계 방향 45도 회전 */
    .rotatexyz { transform: rotate3d(2.5, 1.2, -1.5, 45deg); } 
    /* x축으로 2.5, y축으로 1.2, z축으로 -1.5만큼의 방향 벡터로 45도 회전 */
</style>

▪️ skew 변형 함수 : 요소를 비틀어 왜곡하기
2차원 변형만 가능하며, 양쪽 방향이나 한쪽 방향으로만 비틀기가 가능하다.

<style>
      .skewx:hover { transform: skewX(30deg); } 
      /* x축 기준으로 30도 비틀기 */
      .skewy:hover { transform: skewY(15deg); } 
      /* y축 기준으로 15도 비틀기 */
      .skewxy:hover { transform: skew(-25deg, -15deg); } 
      /* x축 기준으로 -25도, y축으로 -15도 비틀기 */
</style>

변형과 관련된 속성

transform-origin 속성 : 기준 점 설정하기

기본형 transform-origin: <x축> <y축> <z축> | initial | inherit ;

perspective, perspective-origin 속성 : 원근감 표현하기
▪️ 속성 값은 0보다 커야하며 값이 클수록 사용자로부터 멀어진다.
▪️ perspective-origin 속성은 높은 곳에서 원근을 조절하는 듯한 느낌을 만들 수 있다.

속성 값	설명
x축 값	웹 요소가 x축 어디에 위치하는지 지정, 기본 값 50%길이 값, 백분율, left,right, center
y축 값	웹 요소가 y축 어디에 위치하는지 지정, 기본 값 50%길이 값, 백분율 ,top, center, bottom

기본형 perspective: <크기> | none ;
	  perspective-origin: <x축 값> | <y축 값> ;
    /* perspective-origin 속성은 perspective 속성이 함께 지정되어 있어야 사용 가능 */

transform-style 속성 : 3D 변형 적용하기

기본형 transform-style: flat | preserve-3d

backface-visibility 속성 : 요소의 뒷면 표시하기

속성 값	설명
visible	뒷면을 표시 (기본 값)
hidden	뒷면 표시 X

기본형 backface-visibility: visible | hidden

---

📍트랜지션

transform은 요소를 이동하거나 회전, 왜곡시키는 단순한 변형이다.

transition은 웹 요소의 배경 색이 바뀌거나 도형의 테두리가 바뀌는 것처럼 스타일의 속성이 바뀌는 것을 말한다.

트랜지션은 시간에 따라 웹 요소의 스타일 속성을 조금씩 바꿀 수도 있고, 시간을 조절하여 애니메이션 효과를 낼 수도 있다.

transition-property 속성 : 트랜지션을 적용할 속성 지정
▪️ transition-property를 사용하지 않을 경우, 모든 속성이 트랜지션 대상이 되고 특정 속성 이름을 입력하면 그 속성에 트랜지션이 적용된다.

속성 값	설명
all	all 값을 사용하거나 생략할 경우, 요소의 모든 속성이 트랜지션 대상이 됨 (기본 값)
none	트랜지션 동안 아무 속성도 바뀌지 않음
<속성 이름>	트랜지션 효과를 적용할 속성 이름을 지정 속성이 여러 개 일 경우, 쉼표(,)로 구분하여 나열

transition-duration 속성 : 트랜지션 진행 시간 지정
▪️ 진행 시간을 지정해야 그 시간 동안 속성이 자연스럽게 바뀌는 애니메이션 효과를 만들 수 있다.
▪️ 진행 시간은 0초를 기본으로 설정되어 있다.
▪️ 시간 단위는 초(seconds) 또는 밀리 초(milliseconds) 이다.
▪️ 트랜지션 대상이 되는 속성이 여러 개라면 트랜지션 진행 시간도 쉼표(,)로 구분하여 순서대로 여러 개를 지정할 수 있다.
▪️ transition-property에서 지정한 속성의 개수와 transition-duration에서 지정한 값의 개수가 일치하지 않으면, 처음 transition-property 2개 속성에 transition-duration 속성이 적용되고 다시 transition-property 2개 속성에 transition-duration 속성이 반복 적용된다.

transition-timing-function 속성 : 트랜지션 속도 곡선 지정
▪️ 시작과 중간, 끝에서의 속도를 지정해 속도 곡선을 만들 수 있다.
▪️ 속도 곡선은 미리 정해진 키워드나 '베지에 곡선'을 이용해 표현한다.

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)

❓ 베지에 곡선은 n개의 점을 이용해 (n-1)차 곡선을 만들어 내는 함수이다.

transition-delay 속성 : 지연 시간 설정
▪️ 언제부터 트랜지션을 시작할 것인지 설정한다.
▪️ 지정하는 시간만큼 기다렸다가 트렌지션을 시작한다.
▪️ 진행 시간은 0초를 기본으로 설정되어 있다.
▪️ 시간 단위는 초(seconds) 또는 밀리 초(milliseconds) 이다.

transition 속성 : 트랜지션 속성 한꺼번에 표기
▪️ 트랜지션 적용 대상이 전체이고 트랜지션 실행 시간이 대상별로 다르지 않다면 한 번에 지정하는 것이 편리하다.
▪️ 나열 순서는 transition-property, transition-duration, transition-timing-function, transition-delay 순서이다.
▪️ 4개의 속성 중 빠진 것이 있다면 그 속성의 기본 값을 사용한다.

---

📍애니메이션

CSS3의 animation 속성을 사용하면 자바스크립트나 플래시를 사용하지 않고 웹 요소에 애니메이션을 추가할 수 있다.

시작 스타일과 끝 스타일을 지정하면 css에서 중간 스타일을 자동으로 추가해 전체적으로 부드럽게 변하는 애니메이션 효과를 만들어 낸다는 점은 비슷하지만 css 애니메이션은 시작하고 끝내는 동안 원하는 곳 어디서든 스타일을 바꾸며 애니메이션을 정의할 수 있다는 점에서 트랜지션과 다르다.

⚠️ 이때 애니메이션 중간에 스타일이 바뀌는 지점을 키프레임(keyframe)이라고 한다.

css animation에서 사용하는 속성

CSS 애니메이션을 만들 때 애니메이션이 바뀌는 지점은 @keyframes 속성을 이용해 정의하고 animation 속성과 animation 하위 속성을 이용해 애니메이션의 실행 시간이나 반복 여부 등을 지정한다.

속성	설명
@keyframes	애니메이션이 바뀌는 지점을 설정
animation-delay	애니메이션 지연 시간 지정
animation-direction	애니메이션 종료 후 처음부터 시작할지, 역방향으로 진행할지 지정
animation-duration	애니메이션 실행 시간 설정
animation-fill-mode	애니메이션이 종료되었거나 지연되어 애니메이션이 실행되지 않는 상태일 때 요소의 스타일 지정
animation-iteration-count	애니메이션 반복 횟수 지정
animation-name	@keyframes로 설정해 놓은 중간 상태의 이름을 지정
animation-play-state	애니메이션을 멈추거나 다시 시작
animation-timing-function	애니메이션의 속도 곡선 지정
animation	animation 하위 속성들을 한꺼번에 묶어 지정