CSS - 문제 미리보기
문제 1420
medium
다음 세 코드의 시각적 효과를 올바르게 설명한 것은?
```css
/* A */ .box { transform: rotateX(90deg); }
/* B */ .box { transform: rotateY(90deg); }
/* C */ .box { transform: rotateZ(90deg); }
```
```css
/* A */ .box { transform: rotateX(90deg); }
/* B */ .box { transform: rotateY(90deg); }
/* C */ .box { transform: rotateZ(90deg); }
```
정답: B
• 각 축의 회전 방향 이해:
A. rotateX(90deg):
• X축(좌우 수평선)을 중심으로 회전
• 요소가 앞뒤로 기울어짐 (상하 회전)
• 위쪽이 뒤로, 아래쪽이 앞으로 오는 효과
B. rotateY(90deg):
• Y축(상하 수직선)을 중심으로 회전
• 요소가 좌우로 기울어짐 (좌우 회전)
• 왼쪽이 뒤로, 오른쪽이 앞으로 오는 효과
C. rotateZ(90deg):
• Z축(화면 수직)을 중심으로 회전
• 화면 평면에서 시계방향으로 90도 회전
• 2D `rotate(90deg)`와 동일한 효과
A. rotateX(90deg):
• X축(좌우 수평선)을 중심으로 회전
• 요소가 앞뒤로 기울어짐 (상하 회전)
• 위쪽이 뒤로, 아래쪽이 앞으로 오는 효과
B. rotateY(90deg):
• Y축(상하 수직선)을 중심으로 회전
• 요소가 좌우로 기울어짐 (좌우 회전)
• 왼쪽이 뒤로, 오른쪽이 앞으로 오는 효과
C. rotateZ(90deg):
• Z축(화면 수직)을 중심으로 회전
• 화면 평면에서 시계방향으로 90도 회전
• 2D `rotate(90deg)`와 동일한 효과
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.