Transform속성

rotate();
: 입력한 값만큼 회전, 음수도 가능

scale();
:숫자는 비율을 의미,첫번째 인자값은 width값, 두번째 인자값은 height

skew(x,y);
:x축,y축값 만큼 비틂

translate(x,y);
:선택한 오브젝트의 좌표 변경

prefix 접두사
: css3에 새로 나온 애니메이션은 지원안되는 브라우저도 있어서
prefix 접두사를 붙여줘야됨
-webkit- 크롬,사파리
-moz- 파이어폭스
-ms-익스플로러
-o- 오페라

Transition 속성

property: 효과를 적용하고자 하는 css 속성
duration:효과가 나타나는데 걸리는 시간
timing-function:효과의 속도 linear은 '일정하게'라는 의미
delay:특정조건하에서 효과발동 1s는 1초후라는 의미

가상선택자:hover
->css에서 미리 만들어 놓은 클래스
마우스를 올렸을때 라는 조건

transition: width 2s linear 1s;
여기서 2s는 duration 1s는 delay

Animation 속성

iteration-count: 애니메이션 반복횟수
direction: 애니메이션 진행방향
alternate: from -> to -> from
normal: from -> to,from ->from
reverse:to->from,to->from

Transform&Animation 속성

예시코드:

.box1{animation :rotation 1500ms linear infinite alternate;}

@keframes rotation {
from {transform :rotate(-10deg)}
to {transform :rotate(10deg)}
}

prefix 작성시 유의사항
예시코드:

.box1{animation :rotation 1500ms linear infinite alternate;

@-webkit-keframes rotation {
from {-webkit-transform :rotate(-10deg)}
to {-webkit-transform :rotate(10deg)}
}