[CSS 기초] 트랜스폼 (transform)

 

 

안녕하세요 PNcoding입니다 :)

 

오늘은 트랜스폼(transform) 속성에 대하여 알아보도록 하겠습니다.

 

 

트랜스폼은 주로 트랜지션과 함께 사용되는 경우가 많으니 트랜지션이 궁금하신 분은 여기를 참고해 주시면 되겠습니다 :)

https://pncoding.tistory.com/29

[CSS animation] 트랜지션 (transition)

 

---

 

 

트랜스폼은 요소에 위치이동, 회전, 크기조절, 기울이기 효과를 적용시켜 줄 수 있는 속성입니다.

 

트랜스폼의 종류는 총 4가지입니다.

• translate : 위치 이동
• rotate : 지정한 각도만큼 회전
• scale : 배율로 크기 조절 
• skew : 지정한 각도만큼 기울이기

 

하나씩 보도록 하겠습니다.

 

 

 

translate

transform: translate()는 X와 Y축을 기준으로 요소를 원래위치에서 이동시킬 때 사용합니다.

X축은 좌우, Y축은 위아래라고 생각하시면 됩니다.

• translateX(값) : X축으로 이동
• translateY(값) : Y축으로 이동
• translate(값 1, 값 2) : 적힌 순서대로 X Y 축으로 이동, 만약 값을 하나만 적었을 경우 X축만 이동

<div class="box"></div>

 

.box {
    width: 100px;
    height: 100px;
    background-color: slateblue;
    transform: translate(100px, 200px);
}

translate 적용

 

이동이 잘 되는 것을 확인할 수 있습니다.

이 translate 속성값은 position 좌표 속성과 헷갈리실 수 있습니다.

기본적으로 position은 상위부모를 기준으로 움직이는 형태로 많이 사용하며, translate는 항상 자기 자신의 왼쪽 상단을 기준으로 위치가 옮겨진다고 보시면 되겠습니다.

 

포지션 속성이 궁금하신 분은 이 포스팅을 참고해 주시면 되겠습니다 :)

https://pncoding.tistory.com/28

[CSS 기초] 포지션 (position)

 

 

rotate

transform: rotate()는 각도를 기준으로 회전을 시켜줄 수 있습니다.

각도의 단위는 도(degree)의 영어의 앞글자로 deg라 적어줍니다. 

양수값을 적용시켜 주면 시계방향으로, 음수값을 적용시켜 주면 시계 반대방향으로 회전하게 됩니다.

• rotateX(값) : X축으로 회전
• rotateY(값) : Y축으로 회전
• rotateZ(값) : Z 축으로 회전

X축과 Y축은 2D상태에서는 회전되는 것이 잘 보이지 않습니다.

따라서 rotate값은 주로 Z 축을 활용합니다.

.box {
    width: 100px;
    height: 100px;
    background-color: slateblue;
    margin: 200px auto;
    transform: rotateZ(45deg);
}

 

rotateZ 적용 결과

 

Z 축으로 45도를 넣었더니 요소가 회전되는 것을 확인할 수 있습니다.

 

 

반응형

 

 

 

scale

transform: scale() 은 크기를 키워주거나 줄여줄 때 사용합니다.

그 크기는 배율로 표현을 해주며, 처음에 지정한 요소의 크기가 1배라고 생각하시면 됩니다.

예를 들어 요소의 가로 세로의 크기가 처음에 100px이라고 했을 때 scale(2)를 적용시켜 주면 요소의 가로 세로 크기는 원래크기의 2배인 200px이 되는 것입니다.

• scaleX(값) : 가로의 크기만 조절
• scaleY(값) : 세로의 크기만 조절
• scale(값) : 가로 세로 둘 다 조절

.box {
    width: 100px;
    height: 100px;
    background-color: slateblue;
    margin: 50px auto;
    transition-duration: 1s;
}

.box:hover {
    transform: scale(2);
}

 

 

마우스를 올려보세요 :)

 

배율은 1이 기본크기이며 0배, 0.5배, 1.5배, 2배, 3배 등의 배율을 적용시켜 줄 수 있습니다.

크기는 요소의 가운데 혹은 부모가 있다면 부모의 가운데를 기준으로 늘어나거나 줄어듭니다.

이러한 scale 효과는 네이버의 메인에 있는 이미지들에게 적용되어 있습니다.

 

 

skew

transform: skew()는 요소를 X, Y축을 기준으로 비틀어 줄 때 사용합니다.

rotate처럼 각도로 비틀어줄 수 있으며 양수를 넣거나 음수값을 넣는 것에 따라 비틀어 주는 방향을 바꾸어 줄 수 있습니다.

• skewX(값) : X축으로 비틀어 줌
• skewY(값) : Y축으로 비틀어 줌

.box {
    width: 100px;
    height: 100px;
    background-color: slateblue;
    margin: 200px auto;
    transform: skewX(30deg);
}

 

skewX 양수값 사용 결과

 

일반적인 요소의 모양과 다르게 비틀어져서 표현되는 것을 확인할 수 있습니다.

 

 

transform 축약

transform의 속성값은 4가지가 있기 때문에, 요소에 여러 개의 트랜스폼을 적용시키고 싶을 때는 transform속성 안에 띄어쓰기로 구분하여 한 줄에 적어줍니다.

띄어쓰기로 구분해 준다면 순서는 크게 상관없습니다.

transform : rotateZ() scale() translate() skew();

 

.box {
    width: 100px;
    height: 100px;
    background-color: slateblue;
    margin: 200px auto;
    transform: skew(30deg) translate(100px) rotateZ(45deg) scale(1.5);
}

 

 

 

---

 

 

여기까지 해서 트랜스폼에 대하여 알아보았습니다.

 

조금 더 자세히 알고 싶으신 분들은 아래의 유튜브 링크를 클릭하셔서 참고하시면 되겠습니다 :)

 

https://www.youtube.com/watch?v=yMjH5Jfqi_o