Embed Size (px)
Citation preview
CSS3 Transforms발표자 : 이상훈
일시 : 15.01.07
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
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.
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.
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 …
translate()
left (X-axis) and the top (Y-axis) position
rotate()
degree. Negative values counter-rotate
skew()
the horizontal (X-axis) and the vertical (Y-axis)
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 (역방향).
Application examples 3-1
Application examples 3-2
Application examples 3-3(태양계)
Reference sites
http://blog.naver.com/ttb0704/80203646933
http://leeba37.blog.me/50174406851
http://monolife.kr/139
