CSS 인터랙션 CSS 트랜스폼 (Transform) 기초설명
페이지 정보
조회 48회
본문
CSS 트랜스폼 (Transform) 기초설명
CSS transform 속성은 요소를 2차원(2D) 또는 3차원(3D) 공간에서 변형시킬 때 사용합니다.
일반적인 레이아웃 흐름을 깨지 않고도 회전, 크기 조절, 이동, 기울기 효과를 줄 수 있어 인터랙티브한 웹 디자인에 필수적입니다.
1. 주요 2D 변형 함수
가장 자주 사용되는 네 가지 핵심 기능입니다.
translate(x, y): 요소를 현재 위치에서 지정한 거리만큼 이동시킵니다.
translateX(n),translateY(n)으로 개별 제어 가능합니다.
scale(x, y): 요소를 확대 또는 축소합니다.
1보다 크면 확대,0과1사이면 축소입니다.
rotate(angle): 요소를 지정한 각도만큼 회전시킵니다.
단위:
deg(도),turn(바퀴) 등 (예:rotate(45deg))
skew(x-angle, y-angle): 요소를 비틀어 기울입니다.
2. 3D 변형과 원근감 (Perspective)
3D 효과를 주기 위해서는 깊이감을 설정하는 것이 중요합니다.
perspective: 사용자(뷰어)와 화면 사이의 거리를 설정하여 원근감을 부여합니다. 값이 작을수록 왜곡이 심해져 입체감이 강해집니다.
rotateX(),rotateY(),rotateZ(): 각 축을 기준으로 요소를 회전시켜 입체적인 움직임을 만듭니다.translateZ(): 요소를 앞뒤(Z축)로 이동시킵니다.
3. 변형의 기준점: transform-origin
기본적으로 모든 변형은 요소의 **중앙(50%, 50%)**을 기준으로 일어납니다. 이 기준점을 바꾸면 전혀 다른 움직임을 만들 수 있습니다.
문법:
transform-origin: x-axis y-axis z-axis;예시:
top left,bottom right,20% 80%등으로 설정 가능.
4. 핵심 특징 및 주의사항
특징 | 내용 |
비파괴적 변형 | transform은 주변 요소의 배치에 영향을 주지 않습니다. (Layout 변화 없음) |
복합 사용 | 여러 변형을 한 번에 적용할 수 있습니다. (예: transform: rotate(45deg) scale(1.5);) |
순서의 중요성 | 함수를 작성한 순서대로 적용됩니다. 이동 후 회전하는 것과 회전 후 이동하는 결과는 다릅니다. |
성능 최적화 | GPU(그래픽 가속)를 사용하므로 top, left를 이용한 이동보다 애니메이션 성능이 훨씬 뛰어납니다. |
5. 실전 코드 예시
CSS
.card {
width: 200px;
height: 300px;
transition: transform 0.3s ease; /* 부드러운 효과를 위해 추가 */
}
.card:hover {
/* 마우스를 올리면 1.1배 커지며 약간 위로 이동하고 5도 회전 */
transform: scale(1.1) translateY(-10px) rotate(5deg);
}
- 이전글CSS 트랜스폼 translate() 함수 26.02.28
- 다음글[용어] 자바스크립트(JS) 핵심 용어 정리 26.02.27