[CSS] 변형 / 변화

2D 변형

/* 2D 변형: inline-block, block만 적용 가능 */
transform: scale(1);          /* 확대, 축소 */
transform: skewX(20deg);      /* x축 비틀기 */
transform: skewY(20deg);      /* y축 비틀기 */
transform: translateX(50px);  /* 기존 위치 대비 x축 이동 */
transform: translateY(50px);  /* 기존 위치 대비 y축 이동 */
transform: rotate(45deg);     /* 회전*/

3D 변형

/* 3D 변형: 부모요소에 perspective 필수 */
perspective: 400px;            /* 원금감 설정 */
transform: rotateX(40deg);     /* X축 회전 */
transform: rotateY(40deg);     /* Y축 회전 */
transform: translateZ(100px);  /* +는 가깝게 이동, -는 멀리 이동 */

/* 3D 중심축 이동 */
transform-origin: center center; /* 가로축, 세로축 설정 */
transform-origin: right center; /* 가로축, 세로축 설정 */

Motion

/* 모션 설정 */
transition: all 1s;
transition-property: transform background-color   /* 적용 속성 지정 */
transition-duration: 1s;        /* 변화하는 시간 */
transition-delay: 0s;           /* 지연시간 */
transition-timing-function: ease-in;  /* 변경 가속도 */
transition-timing-function: ease-out;
transition-timing-function: linear;
transition-timing-function: cubic-bezier(0,0,0,0);

애니메이션

/* 키프레인 설정 */
@keyframes 프레임명 {
    0% {
        css 설정;
    }
    100% {
        css 설정;
    }
  
}

/* 애니메이션 적용 */
animation: 프레임명 2s linear infinite 0s;
animation-name: 프레임명;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;  /* 반복횟수 설정 */
animation-delay: 0s;
animation-play-state: running;  /* 기본값. 반복 진행 */
animation-play-state: paused;   /* 일시적 정지 상태 */