[[CSS]]의 `transform`으로 글자를 회전하면 보이는 모양이 달라진다. 주변 요소는 회전하기 전의 배치 자리를 기준으로 놓이므로, 기울어진 글자가 이웃을 가릴 수도 있다.
- **상자:** 글줄 안의 글자 일부를 변형할 때는 `inline-block`처럼 변형할 수 있는 상자로 만든다.
- **기준점:** `transform-origin`은 회전과 확대의 기준이다. 중앙을 축으로 돌리는 것과 왼쪽 아래를 축으로 돌리는 것은 다른 장면을 만든다.
- **공간:** 회전한 만큼 주변 간격이 자동으로 늘어나지는 않는다. 여백을 두고 좁은 화면에서도 확인한다.
## 한 파일로 확인하기
아래 전체 코드를 UTF-8 형식의 `example-07.html` 파일로 저장해 웹 브라우저에서 연다. 예제의 전시와 행사는 가상이다.
```html
회전한 글자의 자리: 제작 예제
기울어진 입구
입구
가상의 전시 표식입니다. 글자는 기울어져도
이 문장이 차지하는 자리는 자동으로 비켜나지 않습니다.
```
`rotate(-6deg)`를 `rotate(0deg)`로 바꿔 이웃 문장의 위치를 비교한다. 보이는 윤곽과 [[박스 모델]]의 배치 영역이 같지 않다는 점을 확인할 수 있다. [[회전한 상자의 모서리]]가 화면 밖으로 나가거나 클릭할 대상을 가리는지도 살핀다.
## 참고
- [셰이 하우: CSS 변형](https://learn.shayhowe.com/advanced-html-css/css-transforms/)
- [MDN: CSS 변형 사용하기](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Transforms/Using)
#HTML #CSS #타이포그래피