CSS transform 속성이란?

CSS transform 속성이란?

CSS 에서 제공하는 transform 프로퍼티를 통해서 HTML 요소를 rotate(회전), scale(사이즈 조정), skew(왜곡), translate(이동) 시킬 수 있다.

transform 속성은 CSS Visual formatting model 의 좌표 공간을 수정할 수 있는 기능이 있다.

transform 속성이 none 값을 갖지 않는다면, stacking context 가 만들어진다. 이 경우에는 엘리먼트가 포함하는 position: fixed; 혹은 position: absolute; 엘리먼트에 대해 containing block 으로서 동작할 수 있다.

속성 예제

transform 에서 사용할 수 있는 다양한 함수들은 transform-function 공식문서 에서 찾아볼 수 있다.

/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1, 2, 3, 4, 5, 6);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

/* Global values */
transform: inherit;
transform: initial;
transform: revert;
transform: revert-layer;
transform: unset;

레퍼런스

https://developer.mozilla.org/en-US/docs/Web/CSS/transform