<CSS3> transform

<transform : 변형.> 

transform : 속성값(수치);  

* transform 은 신기능이기 때문에 벤더 프리픽스 등 크로스 브라우징을 위한 처리를 해야한다 * 

* transform은 애니메이션 등 동적기능을 만들때 사용하는 것을 추천한다 * 

*transform은 여러개 썼을 때 누적되어 적용되는 것이 아니라 맨 마지막에 쓴 것이 적용된다. *

<transform의 사용> 

-HTML-

-CSS- 

1. translate(거리)

 : 태그를 이동시킨다. 

* 원래 사용했던 position : relative 로 이동시키기. translate로 같은 효과를 줄 수 있다. 

...

1) transform : translate (x방향 , y방향)  

↓ 오른쪽으로 100px 이동

...

2) transform : translateX();

오른쪽으로 100px 이동

...

3) transform : translateY(); 

아래로 100px 이동

4) 거리를 %로 표시할때 : 이동시키는 태그의 크기의 해당 % 만큼 이동한다. 

아래의 내용은 100% 이므로 오른쪽으로 200px (태그의 width는 200px 이다) 이동했다. 

2. rotate(각도) 

단위로 각도 (deg) 이용. 

+면 시계방향으로 돌고 -면 반시계 방향으로 돈다. 

360도가 넘어도 상관없음

3. scale ()

1이 본래 크기. 배수로 크기가 변한다. 

장점 : 가운데를 기준으로 크기가 변함. 

* 원래 width -height등을 변화시키면 왼쪽위 모서리를 기준으로 크기가 변한다. 

4. skewX or Y(각도) 

: 각도만큼 기울여 평행사변형 만들기

( 평행사변형이 짤려서 margin을 30px에서 50px으로 바꿨다 )

* 여러개를 다 적용할 때는 사이에 띄어쓰기하여 한꺼번에 쓴다. 

* rotate와 translate 순서의 중요성. rotate 됐을때의 translate 방향

위의 예시와 rotate, translate의 순서가 바꼈다. 아래 그림이 결과. -> 위치가 위의 결과와 다르다 

translate의 기준은 해당 태그의 사방의 면. translate x 축은 오른쪽-왼쪽면을 기준으로 움직이고 . translate y 축은 위 아래 면을 기준으로 움직인다. 

rotate가 되면 면의 방향이 바뀌므로 translate의 결과가 달라진다. 

( 아래 그림의 별이 translate하기 전의 대충의 위치)

* transform : none; 

: 아무것도 나타나지 않는다.

*** 속성값과 수치 사이에 띄어쓰기가 있으면 안된다.