3.1 조합 변환의 기초
CSS는 여러 변환을 결합하여 복잡한 시각 효과를 만드는 기능을 제공해. 이 변환에는 translate, rotate, scale, skew가 포함될 수 있고, 이것들은 하나의 transform 속성에 통합될 수 있어.
transform 속성은 여러 변환 함수를 공백으로 구분하여 포함할 수 있어. 이들은 순차적으로, 지정된 순서대로 적용돼. 서로 다른 변환이 어떻게 상호 작용하는지를 이해하는 것이 복잡한 애니메이션과 효과를 만드는 데 있어서 중요해.
문법:
element {
transform: function1() function2() ... functionN();
}
예제:
CSS
element {
transform: translate(20px, 20px) rotate(45deg) scale(1.5) skew(10deg, 5deg);
}
이동 및 회전
이 예제에서는 요소가 50픽셀 오른쪽과 아래로 이동한 뒤, 시계 방향으로 45도 회전한다는 것을 보여줘.
예제:
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: translate(50px, 50px) rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
코드 설명:
.box: 요소는 먼저 50픽셀 오른쪽과 아래로 이동한 다음 시계 방향으로 45도 회전해
3.2 다양한 조합 분석
1. 확장 및 기울기
이 예제에서는 요소가 X와 Y축 모두에서 1.5배 확장되고, 그 후 X축으로 20도, Y축으로 10도 기울어지는 것을 보여줘.
예제:
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: scale(1.5) skew(20deg, 10deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
코드 설명:
.box: 요소는 먼저 X와 Y축 모두에서 1.5배 확장된 후, X축으로 20도, Y축으로 10도 기울어져
2. 이동, 회전 및 확대
이 예제에서는 요소가 100픽셀 오른쪽으로 이동하고, 30도 회전하며, X축에서 2배, Y축에서 1.5배로 확대됩니다.
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: translate(100px, 0) rotate(30deg) scale(2, 1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
코드 설명:
-
.box: 요소는 먼저 100픽셀 오른쪽으로 이동한 다음, 30도 회전하며, X축에서 2배, Y축에서 1.5배로 확대됩니다
3.3 변환 순서의 영향
여러 변환이 조합될 때, 순차적으로 적용된다는 것을 이해하는 것이 중요해. 이는 각 변환이 이전 변환의 결과에 영향을 미친다는 것을 의미해.
이 예제는 변환의 순서를 변경했을 때 결과에 어떻게 영향을 미치는지를 보여줘.
예제 A: 먼저 회전, 그 다음 이동
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-a {
width: 100px;
height: 100px;
background-color: #3498db;
transform: rotate(45deg) translate(50px, 50px);
}
</style>
</head>
<body>
<div class="box-a"></div>
</body>
</html>
예제 B: 먼저 이동, 그 다음 회전
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-b {
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: translate(50px, 50px) rotate(45deg);
}
</style>
</head>
<body>
<div class="box-b"></div>
</body>
</html>
코드 설명:
-
.box-a: 요소는 먼저 45도 회전하고, 오른쪽과 아래로 50픽셀 이동해. 이로 인해 회전 후의 새로운 위치로부터 대각선으로 이동하게 돼 -
.box-b: 요소는 먼저 50픽셀 오른쪽과 아래로 이동한 다음, 45도 회전해. 이로 인해 회전이 새로운 위치에 대해 이루어지게 돼
GO TO FULL VERSION