[CSS3] transform(2d변형) : 특정 요소의 모양을 평면상에서 자유롭게 변형하기

💕IT 공부하기/CSS3

[CSS3] transform(2d변형) : 특정 요소의 모양을 평면상에서 자유롭게 변형하기

수리즘 2023. 4. 27. 09:00

기존 웹 표준에서 모든 HTML 요소의 모양은 사각형이었으며 해당 모양을 변형할 수 있는 방법이 없었지만 CSS3으로 넘어오면서 포토샵의 기능과 비슷한 변형 속성이 대거 추가되었습니다. 따라서 기존에는 불가능하던 다양한 디자인 기법이 순수 CSS 기술만으로도 구현이 가능해졌습니다. 이러한 CSS3 기능의 추가는 jQuery와의 결합을 통해 더욱 역동적이고 인터랙티브한 웹 사이트 제작을 도와줍니다. 여기서는 transform의 속성 중 평면상에서 구현가능한 기능들을 위주로 학습하겠습니다. transform의 경우에는 속성도 다양하고 표기법이 다소 익숙하지 않을 수 있으니 해당 예제를 차분히 따라 해보면서 천천히 눈에 익히기 바랍니다.

(1) translate : x축이나 y축으로 이동

translate는 현재 요소의 위치 값을 기준으로 x축 또는 y축으로 해당 요소를 이동시킵니다.

translate의 사용법은 다음과 같습니다.

x축으로 이동	transform : translateX(x축 이동거리);
y축으로 이동	transform : translateY(y축 이동거리);
x, y축으로 동시 이동	transform : translate(x축 이동거리, y축 이동거리);

※ translate는 해당 요소의 원래 위치 값을 기준점으로 삼아 이동합니다.

다음의 예제를 통해 translate의 기본 개념을 숙지해 보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>translate</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 100px;
            border: 1px solid #000;
            float: left;
        }
       div p { 
            width: 100%;
            height: 100%;
            background: purple;
            opacity: 0.3;
            margin: 0;
        }
        div:nth-child(1) p { transform: translateX(100px);}
        div:nth-child(2) p { transform: translateY(100px);}
        div:nth-child(3) p { transform: translate(100px, 100px);}
    </style>
</head>
<body>
        <div><p></p></div>
        <div><p></p></div>
        <div><p></p></div>
</body>
</html>

3개의 <div>를 생성한 후 자식 요소로 <p>태그를 각각 생성합니다. <div>에 공통으로 모양을 잡아주고 border 값을 설정한 뒤, 자식인 <p>태그에도 같은 크기만큼 설정합니다. 자식인 <p>태그에 translate 속성을 적용해 원래 위치인 <div>에서부터 변형된 값을 확인하기 위한 것입니다. 첫 번째의 자식인 태그에는 x축으로 100px만큼 이동시키고 두 번째 의 자식인 태그에는 y축으로 100px만큼 이동시킵니다. 마지막으로 세 번째 의 자식인 태그에는 동시에 x, y축으로 각각 100px만큼 이동시킵니다.

첫 번째 <div>의 <p>태그는 오른쪽으로 100px만큼 이동하고, 두 번째 <div>의 <p>태그는 아래쪽으로 100px만큼 이동하고, 세 번째 <div>의 <p>태그는 오른쪽 100px, 아래쪽 100px만큼 이동한 것을 확인할 수 있습니다. 만약 translate의 수치 값을 마이너스로 설정하면 반대방향으로 이동합니다.

(2) skew : x축이나 y축으로 기울임

skew는 현재 요소의 각도 값을 기준으로 x축 또는 y축으로 해당 요소를 원하는 각도만큼 기울입니다.

skew의 사용법은 다음과 같습니다.

x축으로 기울이기	transform : skewX(각도);
y축으로 기울이기	transform : skewY(각도);
x, y축으로 기울이기	transform : skew(x축 각도, y축 각도);

※ 각도를 나타내는 단위는 degree의 약자인 deg입니다.

다음의 예제를 통해 skew의 기본 개념을 숙지해 보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>skew</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 100px;
            border: 1px solid #000;
            float: left;
        }
       div p { 
            width: 100%;
            height: 100%;
            background: blue;
            opacity: 0.3;
            margin: 0;
        }
        div:nth-child(1) p { transform: skewX(30deg);}
        div:nth-child(2) p { transform: skewY(30deg);}
        div:nth-child(3) p { transform: skew(30deg, 30deg);}
    </style>
</head>
<body>
        <div><p></p></div>
        <div><p></p></div>
        <div><p></p></div>
</body>
</html>

3개의 <div>를 생성한 후 자식 요소로 <p>태그를 각각 생성합니다. 이전의 예제와 마찬가지로 원본과의 모양을 비교하기 위해 <div>에 공통으로 모양을 잡아주고 border값을 설정한 뒤, 자식인 <p>태그에도 똑같은 크기만큼 설정합니다. 첫 번째 <div>의 자식인 <p>태그에는 x축으로 30도만큼 기울이고, 두 번째 <div>의 자식인 <p>태그에는 y축으로 30도만큼 기울입니다. 마지막으로 세 번째 <div>의 자식인 <p>태그에는 동시에 x, y축으로 각각 30도만큼 기울입니다.

첫 번째 <div>의 <p>태그는 x축을 기준으로 30도만큼 기울고, 두 번째 <div>의 <p>태그는 y축을 기준으로 30도만큼 기울고, 세 번째 <div>의 <p>태그는 x, y 두 방향 모두 30도만큼 기운 것을 확인할 수 있습니다. skew의 수치 값을 마이너스로 설정하면 반대 방향으로 기울어집니다.

(3) scale : x축이나 y축으로 확대/축소

scale은 현재 요소의 크기를 기준으로 x축 또는 y축으로 해당 요소를 확대 또는 축소시킵니다.

scale의 사용법은 다음과 같습니다.

x축으로 확대/축소	transform : scaleX(x축 비율);
y축으로 확대/축소	transform : scaleY(y축 비율);
x, y축으로 확대/축소	transform : scale(x축 비율, y축 비율);

※ scale의 비율은 원본 크기 1을 기준으로 1보다 크면 확대, 1보다 작으면 축소됩니다. 비율 값은 소수점 이하로도 설정할 수 있습니다.

다음의 예제를 통해 scale의 기본 개념을 숙지해 보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>scale</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 100px;
            border: 1px solid #000;
            float: left;
        }
       div p { 
            width: 100%;
            height: 100%;
            background: green;
            opacity: 0.3;
            margin: 0;
        }
        div:nth-child(1) p { transform: scaleX(1.5);}
        div:nth-child(2) p { transform: scaleY(0.5);}
        div:nth-child(3) p { transform: scale(2, 2);}
    </style>
</head>
<body>
        <div><p></p></div>
        <div><p></p></div>
        <div><p></p></div>
</body>
</html>

3개의 <div>를 생성한 후 자식 요소로 <p>태그를 각각 생성합니다. 첫 번째 <div>의 자식인 <p>태그에는 x축으로 1.5배만큼 확대하고 두 번째 <div>의 자식인 <p>태그에는 y축으로 0.5배만큼 축소합니다. 마지막으로 세 번째 <div>의 자식인 <p>태그에는 동시에 x, y축으로 각각 2배만큼 확대합니다.

첫 번째 <div>의 <p>태그는 x축으로 1.5배만큼 늘어났으며, 두 번째 <div>의 <p>태그는 y축으로 0.5배만큼 줄어들었고, 세 번째 <div>의 <p>태그는 x, y축 모두 2배만큼 확대된 것을 확인할 수 있습니다. scale의 경우에는 마이너스 값을 지원하지 않습니다.

(4) rotate : 평면상에서의 회전

rotate는 현재 요소의 각도를 기준으로 해당 요소를 평면상에서 회전시킵니다. 이전 속성들과는 달리 평면상에서 회전시킬 경우에는 따로 x축, y축을 지정하지 않습니다.

rotate의 사용법은 다음과 같습니다.

평면상에서의 회전

transform : rotate(회전각도);

※ 회전각이 플러스 값일 때에는 시계 방향으로, 마이너스 값일 때에는 반시계 방향으로 회전합니다.

다음의 예제를 통해 rotate의 사용법을 숙지해 보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>scale</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 100px;
            border: 1px solid #000;
            float: left;
        }
       div p { 
            width: 100%;
            height: 100%;
            background: red;
            opacity: 0.3;
            margin: 0;
            transform: rotate(15deg);
        }
    </style>
</head>
<body>
        <div><p></p></div>
</body>
</html>

<div>안에 자식 요소로 <p>태그를 생성한 후, <p>태그의 회전 값을 15도만큼 설정합니다.

회전 값을 플러스 값으로 설정하였기 때문에 시계 방향으로 15도만큼 회전된 것을 확인할 수 있습니다.

(5) transform-origin : 해당 요소의 모양을 변형 시, 변형의 기준점 변경

지금까지 transform의 속성들인 (1) translate:이동, (2) skew:기울기, (3) scale:확대/축소, (4) rotate:회전을 배웠습니다. 모두 특정 요소들의 모양을 변형시키는 속성들이었는데, 각가의 변형 속성엔 공통점이 있습니다. 바로 해당 요소의 정중앙을 기준점으로 변형이 일어난다는 점입니다. 지금부터 배울 transform-origin은 이처럼 변형이 일어나는 기준점을 사용자가 임의로 변경해주는 기능입니다. 사용법은 다음과 같습니다.

방향 설정	transform-origin : left top;
고정px 설정	transform-origin : 20px 30px;
퍼센트 설정	transform-origin : 0% 100%;

※ transform-origin의 수치 중 첫 번째는 가로 기준점, 두 번째는 세로 기준점입니다. 각각의 수치 사이에는 콤마(,)를 집어넣지 않는 점을 주의하세요.

다음의 예제를 통해 transform-origin의 사용법을 숙지해 보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>transform-origin</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 100px;
            border: 1px solid #000;
            float: left;
        }
       div p { 
            width: 100%;
            height: 100%;
            background: black;
            opacity: 0.3;
            margin: 0;
            transform: rotate(15deg);
            transform-origin: right bottom;
        }
    </style>
</head>
<body>
        <div><p></p></div>
</body>
</html>

<div>안에 자식 요소로 태그를 생성한 후, 15도 회전의 변형이 일어나는 <p>태그의 기준점을 오른쪽 아래로 설정합니다.

transform-origin의 속성 값을 right bottom으로 설정하였기 때문에 <p>태그가 오른쪽 아래 모서리를 기준으로 15도만큼 회전한 것을 확인할 수 있습니다.

저작자표시 비영리 변경금지

'💕IT 공부하기 > CSS3' 카테고리의 다른 글

[CSS3] transition : CSS 속성의 변화 값을 일정한 시간 동안 모션으로 전환 효과 주기 (0)	2023.05.01
[CSS3] transform(3d변형) : 특정 요소의 모양을 3차원 공간에서 입체적으로 변형하기 (0)	2023.04.29
[CSS3] box-sizing : 볼록 요소의 넓이와 높이 값 안에 padding과 border 값 포함하기 (0)	2023.04.25
[CSS3] background-size : 배경 이미지의 크기 조절하기 (0)	2023.04.24
[CSS3] gradient : 배경에 그라디언트 색상과 모양 지정하기 (0)	2023.04.19

현재글[CSS3] transform(2d변형) : 특정 요소의 모양을 평면상에서 자유롭게 변형하기

수니리즘