Transform

다른 요소들에 영향을 주지 않는다.

transform:scale(); 크기
transform:rotate(deg); 회전
transform:skew(deg);skewX(deg);skewY(deg); 비틀기
transform:translate(x,y); 이동

transform-origin 기준점 수정
transform-origin: center center ; (default)
transform-origin: right bottom; 등등

Transition

값(숫자로 된)의 변화를 애니메이션으로 만들어 준다.

transition-timing-function 가속도
transition-delay 지연속도

transition: 1s 2S; duration delay;

Animation

@keyframes 애니메이션이름{
	0%{
    	transform:translate(0,0);
    }
    50%{
    	transform:translate(300px,0);
    }
    100%{
    	transform:translate(700px,100px);
    }
}

@keyframes 애니메이션이름{
	from{
    	transform:translate(0,0);
    }
    to{
    	transform:translate(300px,0);
    }
}

.box{
	animation:애니메이션이름 2s linear infinite alternate;
}

keyframe 변화가 있는 지점
animatio-iteration-count 반복횟수 지정 : 숫자로 지정 / infinite 무한반복
animation-direction 애니메이션 방향 : alternate / reverse / alternate-reverse
animaion-filii-mode 애니메이션이 끝난 후 속성 : forwards(100%일때 속성 유지)
animation-play-state : running / paused

· 이미지 스프라이트(Image Sprite)

여러개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지
이미지를 다운받기 위한 서버 요청을 줄이고 모바일 환경과 같이 한정된 자원을 플랫폼에서는
웹페이지의 로딩 시간을 단축해주는 효과과 있다.
background-position 값으로 이미지 지정

CSS 3D

perspective (시점의 거리) 속성을 세팅해주면 엘리먼트들이 3D효과를 얻는다.
└ 바로 아래 자식 엘리먼트에만 3d 효과가 적용 된다.
transform-style: preserve-3d; (ie 적용 안됨)

CSS Flex

축이 한방향 (가로or세로) -> Grid는 양방향

justify-content: flex-start
flex-end
center
space-around
space-between

align-items : stretch; 축의 수직방향 정렬
flex-start
flex-end
center

flex-grow:1; 숫자를 넣으면 엘리먼트들이 늘어남.(숫자:콘텐츠 폭을 제외한 여백의 비율 )
flex-basis:0; 콘텐츠 영역의 비율을 지정해줌.(기본값은 auto)
축약형
flex: 1 ;
flex-grow:1;
flew-shrink:1;
flex-basis:0; 축약형의 basis는 안쓰면 0