transform 속성과 functions (함수)

 

🟢 transform

요소의 모양, 위치, 크기, 회전, 기울기 등을 시각적으로 변경할 때 사용하는 속성.

 

◼ functions

속성 값(크기, 색상, 위치 등)을 동적으로 계산하거나 변환하는 함수 역할.

 

1️⃣ 수학적 계산 함수

🔹 calc()

서로 다른 다양한 단위의 값을 섞어서 사칙연산으로 계산. (px, %, em, rem, deg, s 등)

/* 전체 너비에서 100px을 뺀 나머지 */
.functions {
  width: calc(100% - 100px); 
}

• 주의: 연산자 앞뒤에는 반드시 공백 표시.

 

🔹 min() / max()

여러 값 중 가장 작거나 가장 큰 값을 선택.

/* 100%와 700px 중 더 작은 값을 선택 */
.functions {
  width: min(100%, 700px);
}

/* 3vw, 2em 중 큰 값 */
.functions {
  font-size: max(3vw, 2em);
}

 

🔹 clamp()

최소, 최적, 최대 값을 설정하여 반응형 크기를 한 줄로 정의.

.container {
  /* 폰트 크기를 최소 16px, 최대 32px 사이에서 유동적으로 조절 */
  font-size: clamp(16px, 5vw, 32px); 
}

 

---

 

2️⃣ 요소 변형 함수

🔹 translate(x, y, z)

요소를 현재 위치에서 지정한 거리만큼 이동. (px, %)

.move-box {
  width: 100px;
  height: 100px;
  background-color: #ff6b6b;
  transition: transform 0.3s;
}

/* 마우스를 올리면 오른쪽으로 50px, 위쪽으로 20px 이동 */
.move-box:hover {
  transform: translate(50px, -20px);
}

• x: 수평 이동 거리. (오른쪽은 +, 왼쪽은 -)
• y: 수직 이동 거리. (아래는 +, 위는 -)
• z: 깊이 방향 이동 거리. (3D 환경에서 앞은 +, 뒤는 -)

 

🔹 rotate(x, y,z, 각도)

요소를 지정한 각도만큼 회전. (deg)

.rotate-box {
  width: 100px;
  height: 100px;
  background-color: #feca57;
  transition: transform 0.5s;
}

/* 마우스를 올리면 시계 방향으로 45도 회전 */
.rotate-box:hover {
  transform: rotate(45deg);
}

• 시계 방향(양수) 또는 시계 반대 방향(음수)으로 돌린다.

 

🔹 scale(x, y, z)

요소를 지정한 배수만큼 확대 또는 축소.

.scale-box {
  width: 100px;
  height: 100px;
  background-color: #4ecdc4;
  transition: transform 0.3s;
}

/* 마우스를 올리면 전체 크기가 1.2배 커짐 */
.scale-box:hover {
  transform: scale(1.2);
}

/* 팁: 가로만 키우고 싶다면 scaleX(1.5), 세로만 키우고 싶다면 scaleY(1.5) */

• 1이 기준이며, 1.5는 150%, 0.5는 50% 크기를 의미.

 

🔹 skew(x, y, 각도)

요소를 지정한 각도만큼 비틀어 왜곡. (deg)

.skew-box {
  width: 100px;
  height: 100px;
  background-color: #a29bfe;
  transition: transform 0.3s;
}

/* 마우스를 올리면 X축 방향으로 20도 기울어짐 */
.skew-box:hover {
  transform: skewX(20deg);
}

• 면을 잡아당겨 평행사변형 형태로 왜곡.

 

 

🔨 변형 복합 효과

여러 효과를 동시에 주고 싶을 때 공백 한 칸을 띄우고 나열.

.box:hover {
  /* 오른쪽으로 20px 이동하고 45도 회전하며 1.2배 확대 */
  transform: translate(20px, 0) rotate(45deg) scale(1.2);
}

 

---

 

📋 transform 함수 요약표 📋

함수	역할	단위	예시
translate	위치 이동	px, %	translateX(50px)
scale	크기 조절	배수(숫자)	scale(1.5)
rotate	회전	deg	rotate(180deg)
skew	기울기(비틀기)	deg	skewY(20deg)

 

---

 

3️⃣ 색상 및 그래디언트 함수

.hero {
  /* 오른쪽 아래 방향으로 파란색에서 보라색으로 변하는 배경 */
  background: linear-gradient(to bottom right, blue, purple);
  color: rgba(255, 255, 255, 0.8); /* 80% 투명한 흰색 */
}

🔹 linear-gradient(): 선형 그래디언트 배경을 만든다.

🔹 radial-gradient(): 원형 그래디언트 배경을 만든다.

🔹 rgb() / rgba(): 적, 녹, 청색(r, g, b)과 투명도(a)로 색을 만든다.

🔹 hsl() / hsla(): 색상, 채도, 명도로 색을 조절하여 색 변형을 한다.

 

---

 

4️⃣ 기타 유용한 함수

/* 루트 요소에 CSS 변수(커스텀 프로퍼티) 정의 */
:root {
  --main-color: #3498db; /* 메인 색상을 파란색 계열로 설정 */
}

/* .button 클래스 스타일 */
.button {
  background-color: var(--main-color); /* 위에서 정의한 변수를 불러와 배경색으로 사용 */
  background-image: url('pattern.png'); /* 배경 이미지로 pattern.png 적용 */
}

/* .button 요소 뒤에 가상 요소 생성 */
.button::after {
  content: attr(data-label); /* HTML 요소의 data-label 속성 값을 텍스트로 표시 */
}

🔹 var(): 사용자가 정의한 CSS 변수(Custom Properties) 값을 가져온다.

🔹 url(): 이미지, 폰트 등 외부 리소스 파일의 경로를 지정한다.

🔹 attr(): HTML 요소의 속성값을 가져온다. (제한적)

 

 

📍  POINT 📍 

✔️ transform 은 요소의 물리적 공간을 차지하지 않고 시각적인 형태만 바꾼다. ✔️

✔️ calc() 내에서 연산자(+, -) 앞뒤에는 반드시 공백이 있어야 브라우저가 올바르게 인식한다. ✔️

✔️ clamp() 는 미디어 쿼리(@media)를 줄여주는 함수이다. ✔️

 

 

📋 주요 CSS 함수 요약표 📋

카테고리	대표 함수	용도
수학	calc(), clamp()	유연한 수치 계산 (반응형 필수)
변형	translate(), rotate()	요소의 위치 및 형태 변경
색상	rgba(), linear-gradient()	색상 정의 및 효과
참조	var(), url(), attr()	외부 값이나 변수 활용