[CSS3] 엘리먼트 변형/transform /2D

2D tarnsform

# 2D transform 속성값

속성값
rotate(<angle>), rotateX, rotateY	엘리먼트를 X,Y축을 기준으로 회전시킬 각도를 지정. 양수 = 시계방향, 음수는 = 반시계 방향
skew(<angle>), skewX, skewY	엘리먼트의 X,Y축을 다라 엘리먼트를 왜곡시킬 각도 지정. 양수 = 위와 왼쪽 방향, 음수 = 아래와 오른쪽 방향
scale(<num>), scaleX, scaleY	X,Y에 곱할 숫자 값을 지정한다. 양수 = 엘리먼트 크기 증가, 음수도 크기를 증가시키지만 축을 중심으로 엘리먼트를 반전시킨다. 1보다 작은 소수점 숫자를 사용하면 크기가 줄어든다.
translate(<length>), translateX, translateY	엘리먼트의 X, Y축을 따라 엘리먼트를 위치 조절할 길이 값을 지정. 양수 = 엘리먼트를 아래로, 오른쪽 음수 = 엘리먼트를 위, 왼쪽으로
matrix(<variousx6>)	3x3 값 행렬로 앞의 변형 속성들을 단독으로 또는 조합해 사용할 수 있는 단축 속성

 

# transform-origin 속성값

속성값

percentage

length

keyword

 

transform은 약간의 속임수.

각 변형값은 그 자체로 속성이며 각자 괄호 값들을 가질 수 있지만

이런 변형값들은 transform속성과 연관되며 우리는 transform 속성을 항상 사용해야한다.

 

변형값에 사용할 수 있는 3가지 기본값 타입:

• 각도(=angle):
  각도(deg), 그래드(grad), 라디언(rad) 사용
  
  
• 숫자:
  숫자는 주로 곱셈값으로 사용
  
  
• 길이:
  상대값(em, px, %), 절대값(in, mm, cm) 사용

 

보통 둘 또는 세 값은 x, y, z축을 나타낸다.

값을 하나만 사용하면 세 축에 모두 해당 값을 사용

 

# 필요에 따라 여러개 쓰기

transform: scale(.75) rotate(3deg);

공백으로 구분해 여러 개의 변형값을 적용할 수도 있다.

 

# 엘리먼트가 변형 중심이 아닌 경우

변형 중심이 엘리먼트의 중심이 아니라면 변형 중심을 지정할 수 있다.

transform-origin: 0, 25%;

기본적으로 모든 transform은 엘리먼트의 가운데를 중심으로 잡는다.

이런 기본 동작을 바꾸려면 transform()속성과 함께 중점 위치를 나타내는 x,y 위치에 대한 값을 하나 또는 둘을 지정해야 한다.

이때 값으로 백분율, 길이값 또는 키워드를 사용할 수 있다.

 

trnasform-origin 키워드 값:

value

left

right

top

bottom

center

값을 하나만 지정하면 이 값이 x,y좌표에 모두 사용된다.

양수 값은 중점을 엘리먼트 중심의 위쪽, 좌측으로

음수 값은 중점을 엘리먼트 중심의 아래쪽, 우측으로