transform과 변형 함수
이미지를 회전시키거나 이동하는 등 웹 요소를 변형하려면 transform 속성을 사용해야 하는데 transform: 다음에 변형 함수를 함께 입력해 사용합니다.
- 예를 들어 .photo라는 클래스 선택자를 가진 웹 요소를 x축으로 50px, y축으로 100px 이동시키려면 웹 요소를 이동시키는 변형 함수 translate를 사용해 다음과 같이 스타일을 지정합니다.
<style>
.photo{ transform: translate(50px,100px);}
</style>2차원 변형 함수
| 변형 함수 | 설명 |
|---|---|
| translate(tx,ty) | 지정한 크기만큼 x축과 y축으로 이동합니다. |
| translateX(tx) | 지정한 크기만큼 x축으로 이동합니다. |
| translateY(ty) | 지정한 크기만큼 y축으로 이동합니다. |
| scale(sx,sy) | 지정한 크기만큼 x축과 y축으로 확대/축소합니다. |
| scaleX(sx) | 지정한 크기만큼 x축과 y축으로 확대/축소합니다. |
| scaleY(sy) | 지정한 크기만큼 x축과 y축으로 확대/축소합니다. |
| rotate(각도) | 지정한 크기만큼 회전합니다. |
| skew(ax,ay) | 지정한 크기만큼 x축과 y축으로 왜곡합니다. |
| skewX(ax) | 지정한 크기만큼 x축으로 왜곡합니다. |
| skewY(ay) | 지정한 크기만큼 y축으로 왜곡합니다. |
3차원 변형 함수
2차원 변형 함수에 z축을 추가하면 3차원 변형 함수가 됩니다.
| 변형 함수 | 설명 |
|---|---|
| matrix3d(n [,n]) | 4X4행렬을 이용해 이동과 확대/축소,회전ㄷ 등의 변환을 지정합니다. |
| translate3d(tx,ty,tz) | 지정한 크기만큼 x축과 y축,z축으로 이동합니다. |
| translateZ(tz) | 지정한 크기만큼 z축으로 이동합니다. |
| scale3d(sx,sy,sz) | 지정한 크기만큼 x축과 y축,z축으로 확대/축소합니다. |
| scaleZ(sz) | 지정한 크기만큼 z축으로 확대/축소합니다. |
| rotate3d(rx,ry,rz,각도) | 지정한 크기만큼 회전합니다. |
| rotateX(각도) | 지정한 크기만큼 x축으로 회전합니다. |
| rotateY(각도) | 지정한 크기만큼 y축으로 회전합니다. |
| rotateZ(각도) | 지정한 크기만큼 z축으로 이동합니다. |
| perspective(길이) | 입체적으로 보일 수 있는 깊이 값을 지정합니다. |
translate 변형 함수- 요소 이동시키기
translate변형 함수는 2차원과 3차원에서 모두 가능한 변형 함수이빈다.x축 방향이나 y축 방향 또는 양쪽 방향으로 이동할 거리를 지정해 해당 요소를 지정한 크기만큼 이동시킵니다.
<style>
.move:hober {transform: translateX(tx);}
/* x축 방향으로 tx만큼 이동합니다. */
.move:hober {transform: translateY(ty); }
/* y축 방향으로 ty만큼 이동합니다. */
.move:hober {transform: translateZ(tz); }
/* z축 방향으로 tz만큼 이동합니다. */
</style>이미지 이동하기
다음 예제는 translate변형 함수를 이요해 사용자가 이미지 위로 마우스를 올려 놓았을 떄 x축 방향으로 50px만큼 이동하거나 x축과 y축 방향으로 각각 10px와 20px만큼 이동한 것입니다.
원래 이미지 자리에는 1픽셀짜리 테두리가 그려지므로 얼마나 이동하는지 눈으로 확인할 수 있고 마우스를 치우면 원래대로 돌아옵니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Transform</title>
<style>
.origin {
width: 200px;
height: 134px;
border: 1px solid black;
float:left;
margin:40px;
}
.movex:hover {
transform: translateX(50px);
}
.movey:hover {
transform: translateY(20px);
}
.movexy:hover {
transform: translate(10px, 20px);
}
</style>
</head>
<body>
<div class="origin">
<div class="movex">
<img src="images/bus.jpg">
</div>
</div>
<div class="origin">
<div class="movey">
<img src="images/bus.jpg">
</div>
</div>
<div class="origin">
<div class="movexy">
<img src="images/bus.jpg">
</div>
</div>
</body>
</html>
scale 변형 함수- 요소 확대/축소하기
scale변형 함수는 지정한 크기만큼 확대/축소 합니다.
- scale,scaleX,scaleY,scale3d,scaleZ는 괄호 안의 값이 1보다 크면 확대되고 1보다 작으면 축소됩니다.
이미지 확대/축소하기
각 이미지 위로 마우스를 올려 놓으면 scale변형이 적용되는데 첫 번째 이미지는 scaleX함수를 사용해 x축 방향으로만 확대되고, 두번째 이미지는 scaleY함수를 이용해 y축으로만 확대됩니다. 세번째 이미지는 scale함수를 이용해 x,y축 방향으로 동시에 확대되는데 하나의 값만 사용했기 때문에 x축과y축에 같은 값이 적용됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Transform</title>
<style>
.origin {
width: 210px;
height: 200px;
border: 1px solid black;
float: left;
margin: 40px;
}
.scalex:hover {
transform: scaleX(1.2);
}
.scaley:hover {
transform: scaleY(1.5);
}
.scale:hover {
transform: scale(0.7);
}
</style>
</head>
<body>
<div class="origin">
<div class="scalex">
<img src="images/fruit.jpg">
</div>
</div>
<div class="origin">
<div class="scaley">
<img src="images/fruit.jpg">
</div>
</div>
<div class="origin">
<div class="scale">
<img src="images/fruit.jpg">
</div>
</div>
</body>
</html>
rotate 변형 함수-요소 회전하기
2차원과 3차원 변형 모두 간으한 rotate 변형 함수는 지정한 각도만큼 웹 요소를 시계 방향이나 시계 반대방향으로 회전시킵니다.
- rotate변형 함수는 2차원 함수 일때와 3차원 함수 일때의 기본형이 다릅니다.
-2차원 함수 기본형 : transfom:rotate(각도)
-3차원 함수 기본형 : transfom:rotate(rx,ry,각도) - rotate변형 함수는 일반적인 각도(degree)나 레디안(radian)값을 사용합니다.
(이때 1래디안은 180º/𝞹입니다.)
다음은 이미지가 평면에서 회전하는 예제로 이미지 위로 마우스를 올려놓았을 때 20º와 -40º만큼 회전하는 것입니다. 이떄 회전 각도가 양수일 경우, 시계 방향으로 회전하고 음수일 경우,시계 반대방향으로 회전하는 것을 볼 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Transform</title>
<style>
.origin {
width: 210px;
height: 200px;
border: 1px solid black;
float: left;
margin: 40px;
}
.rotate1:hover {
transform: rotate(20deg);
}
.rotate2:hover {
transform: rotate(-40deg);
}
</style>
</head>
<body>
<div class="origin">
<div class="rotate1">
<img src="images/fruit.jpg">
</div>
</div>
<div class="origin">
<div class="rotate2">
<img src="images/fruit.jpg">
</div>
</div>
</body>
</html>
이번에는 회전하는 축도 지정해 3차원 rotate변형 함수를 사용해보겠습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Transform</title>
<style>
.origin {
width: 210px;
height: 200px;
margin: 56px;
float: left;
border: 1px solid black;
-webkit-perspective: 200px;
-moz-perspective: 200px;
-ms-perspective: 200px;
perspective: 200px;
}
.rotatex:hover {
transform: rotateX(45deg);
}
.rotatey:hover {
transform: rotateY(45deg);
}
.rotatez:hover {
transform: rotateZ(45deg);
}
.rotatexyz:hover {
transform: rotate3d(2.5, 1.2, -1.5, 45deg);
}
</style>
</head>
<body>
<div class="origin">
<div class="rotatex"><img src="images/fruit.jpg" alt=""></div>
</div>
<div class="origin">
<div class="rotatey"><img src="images/fruit.jpg" alt=""></div>
</div>
<div class="origin">
<div class="rotatez"><img src="images/fruit.jpg" alt=""></div>
</div>
<div class="origin">
<div class="rotatexyz"><img src="images/fruit.jpg" alt=""></div>
</div>
</body>
</html>
skew변형 함수 - 요소를 비틀어 왜곡하기
2차원 병형만 가능한 skew변형 함수는 요소를 지정한 만큼 왜곡합니다.
이때 양쪽 방향이나 한쪽 방향만 비틀 수 있습니다.
<style>
.skew:hober {transform:skew(ax,ay)}
/* 첫번쨰 각도는 x축에서의 왜곡 각도이고 두번째 각도는 y축에서의 왜곡 각도이다. */
/* 두번째 값이 주어지지 않으면 y축에 대한 왜곡 각도를 0으로 간주하여 y축으로는 왜곡이 생기지 않습니다. */
.skew:hober {transform: skewX(ax);}
/* x축에서만 주어진 각도만큼 왜곡합니다. */
.skew:hober {transform: skewY(ay);}
/* y축에것만 주어진 각도만큼 왜곡합니다. */
</style>x축과y축으로 이미지 왜곡하기
x축기준으로 30º 왜곡한 것과 y축 기준으로 15º 왜곡한 것입니다.그리고 마지막 이미지는 x축으로 -25º, y축으로 -15º 왜곡한 것입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Transform</title>
<style>
.origin {
width: 160px;
height: 240px;
border: 1px solid black;
float: left;
margin: 100px;
}
.skewx:hover {
transform: skewX(30deg);
}
.skewy:hover {
transform: skewY(15deg);
}
.skewxy:hover {
transform: skew(-25deg, -15deg);
}
</style>
</head>
<body>
<div class="origin">
<div class="skewx">
<img src="images/rose.jpg">
</div>
</div>
<div class="origin">
<div class="skewy">
<img src="images/rose.jpg">
</div>
</div>
<div class="origin">
<div class="skewxy">
<img src="images/rose.jpg">
</div>
</div>
</body>
</html>
블로그 이전합니다! https://jyyoun1022.tistory.com/