CSS의 transform으로 글자를 회전하면 보이는 모양이 달라진다. 주변 요소는 회전하기 전의 배치 자리를 기준으로 놓이므로, 기울어진 글자가 이웃을 가릴 수도 있다.
- 상자: 글줄 안의 글자 일부를 변형할 때는
inline-block처럼 변형할 수 있는 상자로 만든다. - 기준점:
transform-origin은 회전과 확대의 기준이다. 중앙을 축으로 돌리는 것과 왼쪽 아래를 축으로 돌리는 것은 다른 장면을 만든다. - 공간: 회전한 만큼 주변 간격이 자동으로 늘어나지는 않는다. 여백을 두고 좁은 화면에서도 확인한다.
한 파일로 확인하기
아래 전체 코드를 UTF-8 형식의 example-07.html 파일로 저장해 웹 브라우저에서 연다. 예제의 전시와 행사는 가상이다.
<!doctype html>
<html lang="ko">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>회전한 글자의 자리: 제작 예제</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; padding: 1rem; color: #202020;
background: #fff; font-family: sans-serif; line-height: 1.7; }
main { max-inline-size: 44rem; margin-inline: auto; }
h1 { font-size: 1.75rem; line-height: 1.3; }
a { color: #164d91; }
:focus-visible { outline: 3px solid #164d91; outline-offset: 4px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.stamp { display: inline-block; margin: 1.5rem; padding: .5rem 1rem;
border: 2px solid; transform: rotate(-6deg); transform-origin: center; }
.note { flex: 1 1 14rem; min-inline-size: 0; }
</style>
<main>
<h1>기울어진 입구</h1>
<div class="row">
<p class="stamp">입구</p>
<p class="note">가상의 전시 표식입니다. 글자는 기울어져도
이 문장이 차지하는 자리는 자동으로 비켜나지 않습니다.</p>
</div>
</main>
</html>rotate(-6deg)를 rotate(0deg)로 바꿔 이웃 문장의 위치를 비교한다. 보이는 윤곽과 박스 모델의 배치 영역이 같지 않다는 점을 확인할 수 있다. 회전한 상자의 모서리가 화면 밖으로 나가거나 클릭할 대상을 가리는지도 살핀다.