CSS3 Transform 웹사이트 요소 변형하는 방법
Transform을 사용하면 웹사이트 요소를 변형해서 여러모양을 만들 수 있습니다.
.
Transform에는 값으로 두가지 함수 rotate()와 skew()를 사용할 수 있습니다.
rotate() 함수를 사용하면 해당 웹사이트 요소를 회전시킬 수 있습니다.
skew() 함수를 사용하면 해당 웹사이트 요소의 기울기를 변형할 수 있습니다.
.
rotate() 함수를 사용해서 해당 웹사이트 요소를 45각도로 회전시켜보겠습니다.
45도에 해당하는 인자는 45deg 형식으로 괄호안에 넣어주면 됩니다.
.
<div style="width: 150px; height: 35px; background-color: green; transform: rotate(45deg);"></div>각도 값이 양수일 경우에는 시계 방향으로 회전하고, 각도 값이 음수일 경우에는 시계 반대 방향으로 회전합니다.
.
이번에는 시계 반대방향으로 45 각도로 회전시켜보겠습니다.
.
<div style="width: 150px; height: 35px; background-color: green; transform: rotate(-45deg);"></div>이렇게 rotate() 함수를 사용해서 웹사이트 요소를 회전시킬 수 있습니다.
.
이번에는 skew() 함수를 사용해서 웹사이트 요소의 기울기를 변형하는 방법에 대해서 알아보겠습니다.
함수의 인자로는 x축과 y축의 기울기 값을 받으며, skewX() 함수를 사용할 때는 x축의 기울기를, skewY() 함수를 사용할 때는 y축의 기울기를 인자로 받습니다.
.
x축으로 30도 기울여 보겠습니다.
<div style="width: 150px; height: 35px; margin-top:70px; margin-bottom: 70px; background-color: green; transform: skewX(30deg);"></div>.
y축으로 30도 기울여 보겠습니다.
<div style="width: 150px; height: 35px; background-color: green; transform: skewY(30deg);"></div>.
이번에는 x축으로 30도, y축으로 30도 기울여 보겠습니다.
<div style="width: 150px; height: 35px; background-color: green; transform: skew(30deg, 30deg);"></div>.
transform 속성의 값으로 rotate()나 skew() 함수를 사용할 때는 항상 요소의 중앙을 기준으로 변형이 이루어지게 됩니다.
그래서 transform 속성과 함께 요소의 기준을 정해주는 transform-origin 속성을 같이 사용합니다.
transform-origin 속성은 값으로 x축의 값, y축의 값, 그리고 z축의 값을 지정할 수 있습니다.
x축의 값과 y축의 값으로는 left, center, right, length, % 등으로 지정할 수 있고, z축의 값으로는 length 값으로 지정할 수 있습니다.
.
transform으로 70도 회전하고 transform-origin을 사용하지 않았습니다.
<div style="width: 150px; height: 35px; background-color: green; transform: rotate(70deg);"></div>.
transform으로 70도 회전하고 transform-origin의 값으로 0%와 0%를 주웠습니다.
이때는 좌측 상단 꼭지점을 기준으로 회전하게 됩니다.
.
<div style="width: 150px; height: 35px; background-color: green; transform: rotate(70deg); transform-origin: 0% 0%"></div>.
transform으로 70도 회전하고 transform-origin의 값으로 100%와 100%를 주웠습니다.
이때는 우측 하단 꼭지점을 기준으로 회전하게 됩니다.
.
<div style="width: 150px; height: 35px; background-color: green; transform: rotate(70deg); transform-origin: 100% 100%"></div>.
이렇게 Transform 속성을 사용해서 웹사이트 요소를 변형하는 방법에 대해서 알아봤습니다.
감사합니다. 🙂