[CSS] animation

CSS3_animation

# 2D Transforms

- 움직임에 대한 속성이 아니라, 객체의 모양을 정의해주는 속성.

- 기존 객체의 위치, 크기, 회전각, 기울기 따위를 지정할 수 있다.

- 하지만 여기에 움직임 즉, 애니메이션은 포함되어 있지 않다.

* 2D Transforms 메소드

- translate(x, y) : 객체의 위치르 가로(x), 세로(y) 방향을 정의하여 이동시킨다.

- translateX(n) : 객체의 위치를 가로 방향으로만 이동시킨다.

- translateY(n) : 객체의 위치를 세로 방향으로만 이동시킨다.

- scale(x, y) : 객체의 크기를 늘이거나 줄일 수 있다. (x는 너비, y는 높이 = 0부터 1까지 )

   ex) scale(2, 0.5)를 적용했을 때는 너비 200px, 높이 50px로 변경된다. //1은 기본크기

- scaleX(n) : 객체 x축 방향으로 늘이거나 줄인다.

- scaleY(n) : 객체의 y축 방향으로 늘이거나 줄인다.

- rotate(angle) : 객체를 회전시킨다. rotate(45deg)는 객체를 시계방향으로 45도 돌린다.

- skew(x-angle, y-angle) : 객체를 기울인다. 실제로 기울이는게 아니라, 선을 왜곡시켜 그렇게 보이게 하는 의미이다. x=수평, y=수직

- matrix(scaleX, tanY, tanX, scaleY, translateX, translateY) : transform이 가지고 있는 모든 함수를 한꺼번에 정의할 수 있다.

- matrix(너비, 수직기울기, 수평기울기, 높이, 수평이동, 수직이동)

https://jsfiddle.net/Kimara/Lssmk4u3/3/

https://jsfiddle.net/Kimara/5udjakrh/

# 3D Transforms

- 3차원 공간과 객체를 표현하는 방법

* 3D Transforms 메소드

- translate3d(x, y, z) : 객체의 위치를 가로(x), 세로(y), 깊이(z) 방향으로 정의하여 이동시킨다.  translate(60px, 60px, 60px)은 객체를 우측으로 60px, 하단으로 60px 그리고 사용자와 60px만큼 가까운 위치로 이동시킨다.

- translateX(n) : 객체의 위치를 가로 방향으로만 이동시킨다.

- translateY(n) : 객체의 위치를 세로 방향으로만 이동시킨다.

- scale3d(x, y, z) : 객체의 세 방향을 한번에 늘이거나 줄일 수 있다.

- scaleX(n) : 객체를 x축 중심으로 늘이거나 줄인다.

- scaleY(n) : 객체를 y축 중심으로 늘이거나 줄인다.

- scaleZ(n) : 객체를 z축 중심으로 늘이거나 줄인다. css에는 두께라는 개념이 없다.

- rotate3d(x, y, z) : 객체의 세 방향을 한번에 회전시킨다.

- rotateX(n) : x축을 중심으로 객체를 회전시킨다.

- rotateY(n) : y축을 중심으로 객체를 회전시킨다.

- rotateZ(n) : 2D transform의 rotate와 동일하다.

- perspective(n) : 객체를 바라보는 원근을 나타낸다. 화면을 바라보는 사용자로부터 얼마나 멀리 위치하는가를 나타낸다. px을 사용하며 수치가 낮을수록 가깝기 때문에 왜곡도 심하게 일어난다.

- matrix3d(nx16) : 모든 값을 한번에 지정할 수 있지만, 16개의 값이 존재한다.

//

* translateZ는 객체의 크기를 조절하는 것이 아니라, 사용자와의 거리를 나타내는 것이다.

* transform : perspective(150px) translateZ(60px)이 있다.

translate 외에도 perspective가 선언되어 있다. 만일 이 속성이 선언되지 않았다면, 객체는 아무런 변화가 일어나지 않는다. translateZ(60px)이란, 객체가 관찰자(나)로부터 60px 거리에 떨어져 있다는 뜻인데, 이 거리감을 표현하려면 나와 객체 사이의 거리를 나타내는 perspective 속성이 반드시 필요하기 때문이다.

https://jsfiddle.net/Kimara/m3emdLex/1/

참고사이트 :

http://desandro.github.io/3dtransforms/

http://mylko72.maru.net/jquerylab/study/css3-3d-perspective.html

출처 :

http://www.beautifulcss.com/archives/2136

http://www.beautifulcss.com/archives/2270