[CSS] transform

transform

 

속성

scale: 확대/축소 효과
rotate: 회전 효과
translate: 이동 효과
skew: 비틀기(기울임) 효과

 

transform:scale() - X 또는 Y 축으로 확대/ 축소

scale은 해당 요소를 지정한 크기만큼 확대 또는 축소 시킨다.

 

transform:scaleX(x축 비율); /* x축으로 확대, 축소 */
transform:scaleY(y축 비율); /* y축으로 확대, 축소 */
transform:scale(x축 비율,y축 비율) /* x축, y축으로 확대, 축소 */

transform:rotate() - 지정 요소 회전

rotate는 요소를 지정한 각도만큼 회전시킨다.

횐전 각도가 플러스 값일 경우 시계 방향으로 , 마이너스 값일 경우 반시계 방향으로 회전한다.

 

transform:rotateX(Ndeg);  /* x축 기준으로 N도 만큼 회전 */
transform:rotateY(Ndeg);  /* y축 기준으로 N도 만큼 회전 */
transform:rotate(Ndeg);   /* N도 만큼 회전 */

 

See the Pen Untitled by heerachoi (@heerachoi) on CodePen.

 

transform:translate() - 지정 요소 X 요소 또는 Y축으로 이동 

translate는 요소를 지정한 위치로 X또는 Y축만큼 이동 시킨다.

transform:translateX(10px); /* x축으로 10px 이동 */
transform:translateY(10px); /* y축으로 10px 이동 */
transform:translate(-10px, -10px) /* x축으로 -10px, y축으로 -10px 이동 */

 

transform:skew() - 지정 요소 x 또는 y 축으로 기울이기

skew는 요소를 지정한 만큼 x 또는 y축으로 기울인다.

 

transform:skewX(Ndeg); /* x축으로 10px 이동 */
transform:skewY(Ndeg); /* y축으로 10px 이동 */
transform:skew(x축 Ndeg, y축 Ndeg) /* x축, y축으로 N도 만큼 기울이기 */