텍스트 회전 효과를 적용한 예제를 6개 제공하겠습니다. 각 예제는 주석과 함께 설명되며, HTML과 CSS 코드로 구성되어 있습니다.
예제 1: 텍스트 45도 회전
<!DOCTYPE html>
<html>
<head>
<style>
/* 텍스트 45도 회전 */
.rotate-text {
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="rotate-text">회전된 텍스트</div>
</body>
</html>
예제 2: 텍스트 수직으로 90도 회전
<!DOCTYPE html>
<html>
<head>
<style>
/* 텍스트 90도 회전 (수직) */
.rotate-text {
transform: rotate(90deg);
}
</style>
</head>
<body>
<div class="rotate-text">수직으로 회전된 텍스트</div>
</body>
</html>
예제 3: 텍스트 대각선으로 135도 회전
<!DOCTYPE html>
<html>
<head>
<style>
/* 텍스트 135도 대각선 회전 */
.rotate-text {
transform: rotate(135deg);
}
</style>
</head>
<body>
<div class="rotate-text">대각선으로 회전된 텍스트</div>
</body>
</html>
예제 4: 텍스트 반대 방향으로 30도 회전
<!DOCTYPE html>
<html>
<head>
<style>
/* 텍스트 -30도 회전 (반대 방향) */
.rotate-text {
transform: rotate(-30deg);
}
</style>
</head>
<body>
<div class="rotate-text">반대 방향으로 회전된 텍스트</div>
</body>
</html>
예제 5: 텍스트 180도 회전
<!DOCTYPE html>
<html>
<head>
<style>
/* 텍스트 180도 회전 */
.rotate-text {
transform: rotate(180deg);
}
</style>
</head>
<body>
<div class="rotate-text">180도 회전된 텍스트</div>
</body>
</html>
예제 6: 텍스트 원형으로 회전
<!DOCTYPE html>
<html>
<head>
<style>
/* 텍스트 원형 회전 */
.rotate-text {
transform: rotate(360deg);
transition: transform 2s ease-in-out;
}
.rotate-text:hover {
transform: rotate(0deg);
}
</style>
</head>
<body>
<div class="rotate-text">원형 회전 텍스트</div>
</body>
</html>
'CSS' 카테고리의 다른 글
| 화면 가운데 정렬: 요소를 화면 가운데 정렬. (0) | 2023.12.23 |
|---|---|
| 툴팁 스타일링: 툴팁 디자인 커스터마이징. (0) | 2023.12.23 |
| 미디어 쿼리: 미디어 쿼리를 사용한 반응형 디자인. (0) | 2023.12.23 |
| 그라데이션 배경: 그라데이션 배경 적용. (0) | 2023.12.23 |
| 라운드 코너: 요소의 모서리를 둥글게 처리. (0) | 2023.12.23 |