what is css3 transforms, basic skill about css3 tansforms, basic example source.

1. CSS3 Transforms
발표자 : 이상훈
일시 : 15.01.07

2. Contents
 What is CSS3 Transforms
 Browser Support for 2D Transforms
 CSS3 2D Transforms methods
 translate()
 rotate()
 skew()
 Animation
 Application examples 3-1
 Application examples 3-2
 Application examples 3-3
 Reference sites

3. What is CSS3 Transforms
 With CSS3 transform we can move, scale, turn, spin, and stretch elements.
 A transformation is an effect that lets an element change shape, size and
position.

4. Browser Support for 2D Transforms
 The numbers in the table specify the first browser version that fully supports
the property.
 Numbers followed by -ms-, -webkit-, -moz-, or -o- specify the first version
that worked with a prefix.

5. CSS3 2D Transforms methods
 In this chapter you will learn about the 2d transform methods:
1. translate()
2. rotate()
3. scale()
4. skew()
5. matrix()
And so on …

6. translate()
left (X-axis) and the top (Y-axis) position

7. rotate()
degree. Negative values counter-rotate

8. skew()
the horizontal (X-axis) and the vertical (Y-axis)

9. Animation
 animation과 transition은 둘 다 변화하고 움직이고 그 모습이 비슷해 보인다.
 하지만, animation은 @keyframes을 이용해 스타일이 바뀔 때 진행하는 시간을
지정해서 좀 더 부드럽게 변화 할 수 있다는 점에서 차이가 있다.
조건 설명
@frames 이름 %단위로 애니메이션을 적용.
0%는 from, 100%는 to로 대체가 가능하다.
animation-duration 애니메이션의 재생시간 (단위 초(s)).
기본값이 0이기 때문에 속성값을 지정하지 않으면 애니메이션은 일어나지 않는다.
animation-delay 애니메이션이 시작되기 전 대기시간 (단위 초(s)).
animation-iteration-count 애니메이션의 반복횟수.
횟수를 숫자로 표기 (무한반복 :infinite).
animation-direction 키프레임의 진행 방향.
animation-direction : normal, animation-direction : alternate (역방향).

10. Application examples 3-1

12. Application examples 3-2

14. Application examples 3-3(태양계)

16. Reference sites
 http://blog.naver.com/ttb0704/80203646933
 http://leeba37.blog.me/50174406851
 http://monolife.kr/139