Programming/HTML CSS
1. transform

CSS3 의 transform 속성은 특정 html 객체에 2차원 변환을 구현하는데 사용합니다. 예를 들어 아래의 div에 대해 60도 정도 기울여 지는 2차원 효과를 구현 하려면
<div id="test_div">
</div>
다음과 같이 transform 속성에 rotate 함수를 지정하면 됩니다.
#test_div {
   width: 100px;
   height: 100px;

   transform: rotate(60deg);

   background-color: blue;
}
transform 속성은 인자로 전달된 변환함수에 따라 해당 html 객체를 변환시키는 동작을 수행하는데 필요에 따라 다음과 같은 함수를 사용할 수 있습니다. 참고로 필요한 경우 다음과 같이 2가지 이상의 변환함수를 연속해서 지정할 수 있는데 이때 적용 순서는 가장 왼쪽 함수부터 오른쪽입니다.
transform: scale(10px, 10px) rotate(60deg);
1. rotate

rotate(숫자deg) 형식으로 사용하며 지정한 값만큼 객체를 회전시킵니다.

2. translate

translate(숫자px, 숫자px) 와 같이 값과 단위를 합친 형식으로 사용하며 지정한 값만큼 객체를 이동시킵니다. 첫번째 값은 X, 두번째 값은 Y 좌표에 해당합니다.

만약 X축으로만 이동하는 경우라면 translateX 함수를 사용하여 X축으로 이동할 값을 지정하며 Y축으로만 이동하는 경우 translateY 함수를 사용할 수 있습니다.

3. scale

scale(숫자, 숫자)와 같은 형식으로 사용하며 객체를 확대하거나 축소합니다. 확대나 축소하는 비율은 지정한 숫자에 달려 있습니다. 예를 들어 1.5 로 하는 경우 1.5배가 되며 0.5로 지정하는 경우 절반정도로 축소되는 동작이 수행될 것입니다.

X축으로만 확대, 축소가 필요하다면 scaleX 함수를, Y축으로만 확대, 축소가 필요하다면 scaleY 함수를 사용합니다.

4. skew

skew(숫자deg, 숫자deg) 형식으로 사용하며 객체를 지정한 값만큼 기울이도록 합니다. 이때 첫번째 값은 X, 두번째 값은 Y축을 나타냅니다.

X축으로만 기울임이 필요하면 slewX 함수를 사용하고 Y축으로만 기울임이 필요하다면 slewY 함수를 사용하면 됩니다.

2. transform-origin

만약 rotate 함수를 사용하여 객체를 회전시켰다면 회전의 동작은 자연스럽게 객체를 정 가운데를 중심으로 회전동작을 수행하게 됩니다. 만약 객체가 변환될때 원하는 지점을 객체의 변환중심으로 설정되도록 하려면 transform-origin 속성을 사용합니다.
transform: rotate(60deg);
transform-origin: 100% 0%;
객체를 60도로 회전시키되 그 기준을 X 축 100%, Y축 0%로 하였습니다. transform-origin 속성에서 값을 지정하는 경우 첫번째 값은 X축을 두번째 값은 Y축을 의미합니다. 따라서 오른쪽 위가 변환중심이 되어 객체를 변환시키게 됩니다.

숫자를 통한 지정이외에 다음과 같이 bottom, center, left, right, top 키워드를 사용할 수도 있습니다.
transform: rotate(60deg);
transform-origin: right top;
0 0