Transform

taehyung·2024년 6월 28일

Css

목록 보기

3/9

HTML 요소를 변형시키는 두 가지 방법

JavaScript

자바스크립트도 position, width, heigth등 HTML 요소를 조작할 수 있는 방법이 있습니다. 하지만 CSS Tranform에 비해 조작할 수 있는 범위가 적고 또한 GPU가속을 사용하지 못하고 계속되는 리플로우 리페인팅 때문에 앱에 과부하를 많이 야기합니다.

CSS

CSS의 Transform은 변형 전용 툴로서 GPU가속, 자유로운 변형을 통해 사용자에게 좋은 인터렉션을 제공할 수 있습니다.

Transform

트랜스폼은 변형의 종류, 중심점의 이동, 변형의 스타일 등 총 네 가지 옵션이 있으며 가장 많이 사용되는 두 가지 변형의 종류와 중심점의 이동에 대해 알아보겠습니다.

중심점의 이동

기본적으로 트랜스폼의 중심점은 HTML 요소의 중앙 입니다. 모든 변형은 중심축을 기준으로 일어나며 이 중심축의 위치를 이동할 수 있습니다.

기본	이동

중심축을 이동하는 코드는 아래와 같다.

 transform-origin: 좌우, 상하
 transform-origin: left, top /* 왼쪽 , 위 가 중심축이 된다 */ 
 transform-origin: 10%, 10% /* 왼쪽10% , 위10% 가 중심축이 된다 */

변형

트랜스폼은 다양한 형식의 변형을 지원하지만 자주 쓰이는 네 가지 변형에 대해 알아보겠습니다.

크기 ( scale ) : 중심점축을 기준으로 크기를 키우거나 줄일 수 있다.

transform: scale(2); /* 200% */
transform: scale(0.5); /* 50% */

위치 ( translate ) : 중심축을 기준으로 단위를 사용해 요소를 이동시킬 수 있다.

transform: translate(10px,10px); /* X축 10px 이동, Y축 10px 이동 */
transform: translateX(1em); /* X축 1em 이동 */
transform: translateY(-2rem); /* Y축 -2rem 이동 */ㅅ
transform: translateZ(-10%); /* Z축 -10% 이동 */

회전 ( rotate ) : 중심축을 기준으로 요소를 회전 시킬 수 있다.

transform: rotate(10deg); /* X축 10도 회전 */
transform: rotateX(20deg); /* X축 20도 회전 */
transform: rotateY(10deg); /* Y축 10도 회전 */
transform: rotateZ(5deg); /* Z축 5도 회전 */

비틀기 ( skew ) : 중심축을 기준으로 요소를 비틀 수 있다.

transform: skew(10deg); /* X축 10도 비틀기 */
transform: skewX(20deg); /* X축 20도 비틀기 */
transform: skewY(10deg); /* Y축 10도 비틀기 */

🙋🏻‍♂️ 위치는 left 와 top , 크기는 width와 height 로 변형 할 수 있는데요?

네 맞습니다. 다만 차이점은 주변의 요소에 영향을 주는지의 여부입니다.

width 와 height	transform : scale

⭐️ width, heigth, left, right 와 같은 css 기본 속성을 변경하게되면 주변 요소에 영향을 주게되며 자연스럽게 리플로우가 발생하고 리페인팅이 전에 요소를 다시 그리게 됩니다. 하지만 css transform 으로 변형을 하게되면 주변요소에 영향을 주지 않기때문에 transform 이 적용된 요소만 다시 그리면 됩니다. 즉, 성능면에서 아주 우수 할 수 있다는 장점이 있습니다.

지금까지 CSS Transform 에 대해 알아봤습니다.