✔ 변형(transform)
⭐ transform과 변형 함수
CSS에서 변형을 적용하려면 transform 속성과 변형 함수 이름을 함께 작성한다.
transform: 함수.photo { transform: translate(50px, 100px); } /* 웹 요소를 x축으로 50px y축으로 100px 이동시키는 클래스
선택자 */ }⭐ 2차원 변형과 3차원 변형
2차원 변형은 웹 요소를 평면에서 변형한다. x축은 오른쪽으로 갈수록 값이 커지고 y축은 아래로 갈수록 값이 커진다.
3차원 변형은 x축과 y축에 원근감을 주는 z축을 추가해서 변형한다. z축은 앞뒤로 이동한다. 보는 사람쪽으로 다가올수록 값이 커지고 멀어질수록 값이 작아진다.
💡 2차원 변형 함수
| 종류 | 설명 |
|---|---|
| translate(tx, ty) | 지정한 크기만큼 x축, y축으로 이동한다. |
| tanslateX(tx) | 지정한 크기만큼 x축으로 이동한다. |
| translateY(ty) | 지정한 크기만큼 y축으로 이동한다. |
| scale(sx, sy) | 지정한 크기만큼 x축과 y축으로 확대·축소한다. |
| scaleX(sx) | 지정한 크기만큼 x축으로 확대·축소한다. |
| scaleY(sy) | 지정한 크기만큼 y축으로 확대·축소한다. |
| rotate(각도) | 지정한 각도만큼 회전한다. |
| skew(ax, ay) | 지정한 각도만큼 x축과 y축으로 왜곡한다. |
| skewX(ax) | 지정한 각도만큼 x축으로 왜곡한다. |
| skewY(ay) | 지정한 각도만큼 y축으로 왜곡한다. |
💡 3차원 변형 함수
| 종류 | 설명 |
|---|---|
| translate(tx, ty, tz) | 지정한 크기만큼 x축, y축, z축으로 이동한다. |
| tanslateZ(tz) | 지정한 크기만큼 z축으로 이동한다. |
| scale(sx, sy, sz) | 지정한 크기만큼 x축, y축, z축으로 확대·축소한다. |
| scaleZ(sz) | 지정한 크기만큼 z축으로 확대·축소한다. |
| rotate(rx,ry,각도) | 지정한 각도만큼 회전한다. |
| rotate(rx,ry,rz,각도) | 지정한 각도만큼 회전한다. |
| rotateX(각도) | 지정한 각도만큼 x축으로 회전한다. |
| rotateY(각도) | 지정한 각도만큼 y축으로 회전한다. |
| rotateZ(각도) | 지정한 각도만큼 z축으로 회전한다. |
| perspective(길이) | 입체적으로 보일 수 있도록 깊잇값을 지정한다. |
⭐ translate() 함수 (웹 요소를 이동)
translate() 함수는 x축이나 y축 또는 z축(3차원)으로 웹요소를 이동시키는 함수이다.
💡 기본형
transform: translate(tx, ty)
transform: translate3d(tx, ty, tz)
transform: translateX(tx)
transform: translateY(ty)
transform: translateZ(tz)🔎예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Transform:translate</title>
<style>
#container {
width:800px;
height:200px;
margin:20px auto;
}
.origin {
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
margin: 40px;
}
.origin > div {
width:100px;
height:100px;
background-color:orange;
}
#movex {
transform: translateX(50px); /* x축으로(가로) 50px 이동 */
}
#movey {
transform: translateY(20px); /* y축으로(세로) 20px 이동 */
}
#movexy {
transform: translate(10px, 20px); /* x축으로(가로) 10px, y축으로(세로) 20px 이동 */
}
</style>
</head>
<body>
<div id="container">
<div class="origin">
<div id="movex"></div>
</div>
<div class="origin">
<div id="movey"></div>
</div>
<div class="origin">
<div id="movexy"></div>
</div>
</div>
</div>
</body>
</html>
⭐ scale() 함수 (요소를 확대·축소)
scale() 함수는 웹 요소를 지정한 크기만큼 확대하거나 축소한다.
scale(sx, sy, sz) - 괄호 안의 값들이 1보다 크면 확대되고 1보다 작으면 축소된다.
즉, 1이 1배율이 되는 것이다.
💡 기본형
transform: scale(sx, sy)
transform: scale3d(sx, sy, sz)
transform: scaleX(sx)
transform: scaleY(sy)
transform: scaleZ(sz)🔎예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Transform:scale</title>
<style>
#container{
width:600px;
margin:20px auto;
}
.origin {
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
margin: 40px;
}
.origin > div {
width:100px;
height:100px;
background-color:orange;
}
#scalex{
transform: scaleX(2); /* x축으로(가로) 2배 확대 */
}
#scaley{
transform: scaleY(1.5); /* y축으로(세로) 1.5배 확대 */
}
#scale{
transform: scale(0.7); /* x, y축으로(가로, 세로) 0.7배 확대 */
}
</style>
</head>
<body>
<div id="container">
<div class="origin">
<div id="scalex"></div>
</div>
<div class="origin">
<div id="scaley"></div>
</div>
<div class="origin">
<div id="scale"></div>
</div>
</div>
</body>
</html>
⭐ rotate() 함수 (요소를 회전)
rotate() 함수는 요소를 회전시킨다. rotate() 함수는 2차원과 3차원에서 모두 사용할 수 있다.
2차원에서 사용 시 각도만 지정하면 된다. 양수일 시 오른쪽, 음수일 시 왼쪽이다.
3차원에서 x축이나 y축, z축을 기준으로 회전시킨다. 이때 perspective 속성을 함께 사용하면 원근감을 추가해 회전 형태를 입체적으로 표현할 수 있다.
💡 기본형
/* 2차원 */
transform: rotate(각도)
/* 3차원 */
transform: rotate(rx,ry,각도)
transform: rotate3d(rx,ry,rz,각도)
transform: rotateX(각도)
transform: rotateY(각도)
transform: rotateZ(각도)🔎예시 - 2D rotate
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Transform:rotate</title>
<style>
#container{
width:800px;
margin:20px auto;
}
.origin {
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
margin: 40px;
}
.origin > div {
width:100px;
height:100px;
background-color:orange;
}
#rotate1 {
transform: rotate(40deg); /* 시계 방향(오른쪽)으로 40도 회전 */
}
#rotate2 {
transform: rotate(-120deg); /* 시계 반대 방향(왼쪽)으로 120도 회전 */
}
</style>
</head>
<body>
<div id="container">
<div class="origin">
<div id="rotate1"></div>
</div>
<div class="origin">
<div id="rotate2"></div>
</div>
</div>
</body>
</html>
🔎예시 - 3D rotate
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Transform</title>
<style>
#container{
width:800px;
margin:20px auto;
}
.origin {
width: 100px;
height: 100px;
margin: 40px;
float: left;
border: 1px solid black;
perspective: 200px; /* 원근감 추가 */
}
.origin > div {
width:100px;
height:100px;
background-color:orange;
transition:all 3s; /* 3초 동안 회전하도록 트랜지션 적용 */
}
#rotatex:hover {
transform: rotateX(55deg); /* x축으로 55도 회전 */
}
#rotatey:hover {
transform: rotateY(55deg); /* y축으로 55도 회전 */
}
#rotatez:hover {
transform: rotateZ(55deg); /* z축으로 55도 회전 */
}
#rotatexyz:hover {
transform: rotate3d(2.5, 1.2, -1.5, 55deg); /* x,y,z축으로 55도 회전 */
}
</style>
</head>
<body>
<div id="container">
<div class="origin">
<div id="rotatex"></div>
</div>
<div class="origin">
<div id="rotatey"></div>
</div>
<div class="origin">
<div id="rotatez"></div>
</div>
<div class="origin">
<div id="rotatexyz"></div>
</div>
</div>
</body>
</html>
📌perspective 속성
perspective 속성은 원래 위치에서 사용자가 있는 방향이나 반대 방향으로 잡아 당기거나 밀어내어 원근감을 표현한다.
perspective 속성은 0보다 커야하며, 원래 위치에서 사용자가 있는 쪽으로 얼마나 이동하는지 픽셀 크기로 나타낸다.
반드시 주의해야하는 점은 perspective 속성은 변형하는 요소가 아닌 변형하는 요소의 부모 요소에 정의해야 한다는 것이다.
⭐ skew() 함수 (요소를 비틀어 왜곡)
skew() 함수는 지정한 각도만큼 요소를 비틀어 왜곡한다. 이때 양쪽 방향으로 비틀거나 한쪽 방향으로 비틀 수도 있다.
💡 기본형
transform: skew(x각도, y각도)
transform: skewX(x각도)
transform: skewY(y각도)🔎예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Transform</title>
<style>
#container{
width:600px;
margin:20px auto;
}
.origin {
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
margin: 40px;
}
.origin > div {
width:100px;
height:100px;
background-color:orange;
}
#skewx {
transform: skewX(30deg); /* x축 기준으로 30도 비틀기 */
}
#skewy {
transform: skewY(15deg); /* y축 기준으로 15도 비틀기 */
}
#skewxy {
transform: skew(-25deg, -15deg); /* x축 기준으로 -25도, y축 기준으로 -15도 비틀기 */
}
</style>
</head>
<body>
<div id="container">
<div class="origin">
<div id="skewx"></div>
</div>
<div class="origin">
<div id="skewy"></div>
</div>
<div class="origin">
<div id="skewxy"></div>
</div>
</div>
</body>
</html>
출처: 고경희(2021), "베스트셀러Do it! HTML+CSS+자바스크립트 웹 표준의 정석", 이지스 퍼블리싱
반려묘 velog