1.1 transform 속성
CSS 변환은 요소의 위치, 크기, 회전 및 기울기를 문서의 일반적인 흐름을 변경하지 않고도 변경할 수 있게 해줘. 이건 상호작용성과 동적 웹 인터페이스를 만들기 위한 강력한 도구지. transform, translate, rotate, scale 그리고 skew 속성을 사용한 변환의 기초를 살펴보자.
transform 속성은 요소에 2D 및 3D 변환을 적용할 수 있게 해줘. 이 속성은 translate, rotate, scale 및 skew 같은 다양한 변환 함수를 결합해.
문법:
element {
transform: transformation-function;
}
여기서:
transformation-function: 요소에 적용되는 변환 함수
사용 예:
CSS
.element {
transform: translate(50px, 100px);
}
1.2 translate 변환
translate 변환은 X축 및/또는 Y축을 따라 요소를 이동시키는 데 사용돼.
문법:
element {
transform: translate(x, y);
}
여기서:
x: X축의 이동 (음수 또는 양수일 수 있어)y: Y축의 이동 (음수 또는 양수일 수 있어)
예제:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>translate 변환</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 0.5s;
}
.box:hover {
transform: translate(50px, 50px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
코드 설명:
.box: 고정 크기와 색상을 가진 요소.box:hover: 요소에 마우스를 올리면translate(50px, 50px)변환이 적용되어 요소를 오른쪽 아래로 50픽셀 이동시킴
1.3 rotate 변환
회전 변환은 요소를 중심으로 회전시키는 데 사용돼.
문법:
element {
transform: rotate(angle);
}
여기서:
angle: 회전 각도 (음수 또는 양수일 수 있어)
예제:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rotate 변환</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transition: transform 0.5s;
}
.box:hover {
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
코드 설명:
.box: 고정 크기와 색상을 가진 요소.box:hover: 요소에 마우스를 올리면rotate(45deg)변환이 적용되어 시계 방향으로 45도 회전됨
1.4 scale 변환
scale 변환은 X축 및/또는 Y축을 따라 요소의 크기를 변경하는 데 사용돼.
문법:
element {
transform: scale(sx, sy);
}
여기서:
sx: X축의 크기 조정 (1보다 크면 확대, 1보다 작으면 축소)sy: Y축의 크기 조정 (1보다 크면 확대, 1보다 작으면 축소)
예제:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scale 변환</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transition: transform 0.5s;
}
.box:hover {
transform: scale(1.5, 1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
코드 설명:
.box: 고정 크기와 색상을 가진 요소-
.box:hover: 요소에 마우스를 올리면scale(1.5, 1.5)변환이 적용되어 요소의 크기가 X축과 Y축 모두 1.5배 커짐
1.5 skew 변환
skew 변환은 X축 및/또는 Y축을 따라 요소를 기울이는 데 사용돼.
문법:
element {
transform: skew(ax, ay);
}
여기서:
ax: X축의 기울기 각도 (음수 또는 양수일 수 있어)ay: Y축의 기울기 각도 (음수 또는 양수일 수 있어)
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>skew 변환</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #9b59b6;
transition: transform 0.5s;
}
.box:hover {
transform: skew(20deg, 10deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
코드 설명:
.box: 고정 크기와 색상을 가진 요소.box:hover: 요소에 마우스를 올리면skew(20deg, 10deg)변환이 적용되어 X축을 기준으로 20도, Y축을 기준으로 10도 기울어짐
1.6 다양한 변환의 결합
transform 속성은 여러 변환 함수를 결합하여 복잡한 효과를 얻을 수 있게 해줘.
예제:
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;
transition: transform 0.5s;
}
.box:hover {
transform: translate(50px, 50px) rotate(45deg) scale(1.5) skew(20deg, 10deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
코드 설명:
.box: 고정 크기와 색상을 가진 요소.box:hover: 요소에 마우스를 올리면translate,rotate,scale,skew변환이 동시에 적용되어 복잡한 효과를 생성함
GO TO FULL VERSION