2.1 transform-origin 속성
CSS에서 transform-origin 속성은 rotate, scale, skew, translate 같은 변환이 적용되는 기준점을 정의해. 기본적으로 이 점은 요소의 중앙에 있지만 원하는 시각적 효과를 얻기 위해 위치를 변경할 수 있어.
transform-origin의 기본
transform-origin 속성의 문법:
element {
transform-origin: x-axis y-axis z-axis;
}
여기서:
x-axis: 수평 축에 대한 점의 위치를 결정y-axis: 수직 축에 대한 점의 위치를 결정z-axis: Z 축에 대한 점의 위치를 결정 (3D 변환에 사용됨)
가능한 값:
- 키워드:
top,right,bottom,left,center - 백분율 값: 요소 크기의 백분율로 기준점을 설정
- 절대 값: 픽셀 또는 다른 단위로 기준점을 설정
값의 예:
transform-origin: 50% 50%;— 요소의 중앙 (기본값)transform-origin: 0 0;— 요소의 왼쪽 상단 모서리transform-origin: 100% 100%;— 요소의 오른쪽 하단 모서리transform-origin: 50px 100px;— 왼쪽 상단 모서리에서 오른쪽으로 50픽셀, 아래로 100픽셀 이동
기준점 중앙 설정 (기본값)
이 예에서는 rotate 변환이 요소의 중앙을 기준으로 발생할 거야.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기준점 중앙 설정</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.2 기준점 이동
기준점 왼쪽 상단으로 이동
이 예에서는 변환의 기준점이 요소의 왼쪽 상단 모서리로 이동되었어.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기준점 왼쪽 상단으로 이동</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: rotate(45deg);
transform-origin: top left;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
기준점 오른쪽 하단으로 이동
이 예에서는 변환의 기준점이 요소의 오른쪽 하단 모서리로 이동되었어.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기준점 오른쪽 하단으로 이동</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transform: rotate(45deg);
transform-origin: bottom right;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.3 값 설정
백분율 값 사용
이 예에서는 변환의 기준점이 수평축 25%, 수직축 75%에 위치해.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>백분율 값 기준점</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #9b59b6;
transform: rotate(45deg);
transform-origin: 25% 75%;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
절대 값 사용
이 예에서는 변환의 기준점이 수평축 50픽셀, 수직축 20픽셀로 이동되어 있어.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>절대 값 기준점</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f1c40f;
transform: rotate(45deg);
transform-origin: 50px 20px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.4 실용적인 적용
특정 점을 기준으로 요소 회전
transform-origin을 사용하면 특정 지점을 기준으로 회전하는 요소를 쉽게 만들 수 있어. 예를 들어 시계의 바늘 만들기.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>시계 바늘 회전</title>
<style>
.clock {
position: relative;
width: 200px;
height: 200px;
border: 5px solid #333;
border-radius: 50%;
margin: 50px auto;
}
.hand {
position: absolute;
bottom: 50%;
left: 50%;
width: 5px;
height: 50%;
background-color: #333;
transform-origin: bottom center;
}
.hour-hand {
transform: rotate(30deg); /* 예: 1시 방향 */
}
</style>
</head>
<body>
<div class="clock">
<div class="hand hour-hand"></div>
</div>
</body>
</html>
확장 가능한 요소 만들기
기준점을 변경하면 다양한 지점에 따라 요소를 확장할 수 있어, 이는 동적 인터페이스를 만드는 데 유용할 수 있지.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>확장 가능한 요소</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #1abc9c;
transition: transform 0.5s;
transform-origin: top left;
}
.box:hover {
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
GO TO FULL VERSION