css3 transforms

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