Web/HTML5 & CSS3
[HTML5&CSS3] 2차원 구현
클리엘
2020. 1. 10. 15:10
728x90
CSS3에서 2차원/3차원을 구현하는 데는 transform함수가 사용됩니다.
<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
<style type="text/css">
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
transform: rotate(60deg);
}
</style>
</head>
<body>
<div>Hello, World!</div>
</body>
</html>
예제에서는 transform속성에 rotate함수를 사용하여 대상 개체를 60도로 회원 시켰습니다. 이외에 transform에는 다음과 같은 함수 사용이 가능합니다.
| translate(x, y) | 지정된 좌표만큼 개체를 이동시킵니다. (px와 같은 단위사용) |
| translateX(x) | X축만큼 개체를 이동시킵니다. |
| translateY(y) | Y축만큼 개체를 이동시킵니다. |
| scale(x, y) | 지정된 좌표로 크기를 늘리거나 축소합니다. (소수점이나 정수사용) |
| scaleX(x) | X축만큼 크기를 늘리거나 축소합니다. |
| scaleY(y) | Y축만큼 크기를 늘리거나 축소합니다. |
| skew(x, y) | 지정된 좌표로 개체를 기울입니다.(deg와 같은 단위사용) |
| skewX(x) | X축만큼 개체를 기울입니다. |
| skewY(y) | Y축만큼 개체를 기울입니다. |
| rotate(angle) | 해당 각도로 개체를 회전시킵니다.(deg와 같은 단위 사용) |
만약 2가지 이상의 함수를 사용해야 한다면 공백으로 각각의 함수를 구분해 사용합니다.
<style type="text/css">
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
transform: scale(2, 2) skew(10deg, 20deg) rotate(60deg);
}
</style>
transform속성에 사용되는 함수는 기본적으로 개체의 중심을 기준으로 변환이 적용됩니다. 이 기준을 바꾸려면 transform-origin속성을 사용합니다.
<style type="text/css">
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
transform: scale(2, 2) skew(10deg, 20deg) rotate(60deg);
transform-origin: right bottom;
}
</style>
transform-origin속성에 right로 오른쪽을, bottom으로 아래를 지정했으므로 오른쪽 아래부분이 변환의 중심이 됩니다. 좀 더 미세하게 조정이 필요하다면 직접 단위를 통해서 지정할 수도 있습니다.
<style type="text/css">
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
transform: scale(2, 2) skew(10deg, 20deg) rotate(60deg);
transform-origin: right 80%;
}
</style>보시는 바와 같이 숫자를 통해 위치를 지정하여 오른쪽에서 80%정도의 아랫부분으로 기준점을 변경하였습니다.
728x90