- transform이란 어떤 object를 돌린다거나 크기나 위치를 조정할 때 사용
- rotate(00deg); : 입력한 각도만큼 회전(음수도 입력 가능)
- scale(0,0); : 숫자의 비율을 의미 앞자리는 width 뒷자리는 height 만큼 확대 축소는 소수점!
- skew(00deg,00deg); : x축, y축으로 입력한 만큼 각도를 비틂
- translate(00px, 00px); : 선택한 오브젝트의 좌표 변경
- prefix 접두사 : CSS3의 최신언어이기때문에 각각의 브라우저의 버젼에 맞춰 넣어줘야함
<style>
.transition{
-webkit-transform : translate(100px, 200px); // chrome, safari
-moz-transform : translate(100px, 200px); // firefox
-ms-transform : translate(100px, 200px); // explore 9.0
-0-transform : translate(100px, 200px); // opera
}
</style>
2. transition
- property: (width|background-color,...); : 효과를 적용하고자 하는 CSS 속성
- duration: 0s; : 효과가 나타나는데 걸리는 시간
- timing-function:linear; : 효과의 속도 linear은 일정하게라는 의미
- deplay : 0s; : 특정 조건하에서 효과 발동
- (가상선택자) hover : CSS에서 미리 만들어놓은 클래스
- 예시
<style>
.class_name{
// 아래처럼 한 줄로 가능
.transition : width 2s linear 1s; // 처음 나오는 s는 duration
.transition : hover{width : 300px;} // 2번째 나오는 s는 delay
}
</style>
#result
## 마우스를 올리면 1초 후에 width값이 300px로 2초동안
## 속도 일정하게 변하는 애니메이션 효과
3. animation
- 조건에 상관없이 이벤트를 생성할 때 ex) 웹사이트를 접속하자마자
- animation-name : name; : class처럼 이름을 생성
- animation-duration : 0s; : 실행되는 시간
- animation-timing-funtion : linear; : 속도 곡선을 제어
- animation-deplay : 0s; : 시작전 deplay 시간
- animation-literation-count : 6; : 애니메이션 반복 횟수
- animation-direction : alternate; : from -> to -> from 시작->끝->시작
- animation-direction : normal; : from -> to,시작->끝
- animation-direction : reverse; : to -> from,끝->시작
- @kayframes : 애니메이션을 적용하기위해선 반드시 필요한 문자
@keyframes animation_name{
from{ width : 300px; }
to{width : 600px; }
}
<style>
.box1{
// 1500ms == 1.5s
-webkit- animation : rotation 1500ms linear infinite alternate;
}
@-webkit-keyframes rotation{
from{ -webkit- transform : roate(-10deg); }
to{ -webkit- transform : roate(10deg); }
}
</style>