Transform

Transform : 요소에 특정한 변형 효과를 제공

                   요소를 2D또는 3D 공간에서 변형시키는데 사용

                   주로 애니메이션과 인터랙티브 디자인에서 많이 사용

 

1. translate : X축과 Y축 방향으로 이동시키는데 사용 (기본적으로 X축은 오른쪽으로 Y축은 아래로 움직인다)

                     -> 원래 위치를 기준으로 지정한 거리만큼 이동 가능

                     + 2D 변형 : translate, 3D 변형 : translate3d or translatez....

 

• translate(x, y): 요소를 X축과 Y축 방향으로 이동
• translateX(x): 요소를 X축 방향으로 이동
• translateY(y): 요소를 Y축 방향으로 이동
• translateZ(z): 요소를 Z축 방향으로 이동 (3D 변형)
• translate3d(x, y, z): 요소를 X, Y, Z축 방향으로 이동 (3D 변형)

+ 기타 변형 결합

<style> .box { width: 100px; height: 100px;

               background-color: orange;

               transform: translate(50px, 100px) rotate(45deg) scale(1.5);

                /* 이동, 회전, 크기 조정 => x, y축 이동, 45도 회전, 크기 1.5배 조정 */ }

</style>

 

2. scaleX / scaleY : 2차원 확대 또는 축소

                                width 크기 조절 / height 크기 조절

• transform: scaleX/Y(sx);

          - sx : X축 방향으로의 배율
          - 1 : 원래 크기와 동일
          - 2 : 원래 크기의 두 배
          - 0.5 : 원래 크기의 절반
          - 음수 : 좌우 반전

+ @keyframes를 통해 시간에 따라 다르게 조작 가능

    .box {

        .....

        animation: scaleAnimation 2s infinite alternate; }

 

    @keyframes scaleAnimaition {                          ➡️       .box 요소가 2초마다 

          from {                                                                      원래크기 에서 가로 크기를 두배로 확대되고

               transform: scaleX(1); }                                       다시 원래 크기로 돌아온다.

          to {

               transform: scaleX(2); }

+ 변형 함수들과 결합하여 복합적인 변형효과 생성가능

    .box {

        .....                                                                                                  ➡️ .box 요소가 X축으로 50px 이동하고,

        transform: translateX(50px) scaleX(1.5) rotate(30deg); } }                  크기를 1.5배 확대하며, 30도 회전한다.

 

3. skrew : 2차원으로 요소를 기울일 때

      - transform: skew(ax, ay);
      - ax/ay : X/Y축 방향으로 기울이는 각도 지정
      - deg : 기본 단위 도
      - 음수 : 반대 방향 (왼쪽)
      - .box { ......; transform: skew(ax, ay); }
      - 다른 변형과 결합 : .box { ....; transform: translateX(50px) skew(200deg, 10deg);

           -> X축으로 50px 이동 후 X축 방향으로 20도, Y축 방향으로 10도 기울여진다. 

 

4. rotate : 2차원으로 요소를 회전시킬 때

                주어진 각도만큼 시계방향으로 회전시키는 변형 함수
      - transform: rotate(angle);
      - angle : 요소를 회전시킬 각도 지정
      - 단위 : deg(도), rad(라디안), turn(회전)
      - 음수 단위 일땐 반시계 방향으로 회전
      - 180deg로 회전 시키면 상하 반전

      - 다른 변형과 결합 : .box { ....; transform: translateX(50px) rotate(30deg);

           -> X축으로 50px 이동 후 30도 각도로 시계방향으로 회전 

 

5. transform-origin : 요소의 transform을 적용 시 기준점을 변경 지정

                                요소의 변형 방향이나 효과 조절 가능

      - transform-origin: x-axis y-axis z-axis;

      - 각각 X축, Y축, Z축 방향으로 지정

      - 축의 값 : 1️⃣길이 값 (px, %..) 2️⃣키워드 (top, bottom, left, center...)

      - .box { ....; transform: rotate(45deg); transform-origin: center center; }

           -> .box 요소가 45도 각도로 시계 방향으로 회전하며 회전 중심점을 요소의 중앙으로 설정

      - .box { ....; transform: rotate(45deg); transform-origin: bottom right; }

           -> .box 요소가 45도 각도로 시계 방향으로 회전하며 회전 중심점을 요소의 오른쪽 하단으로 설정