CSS transform

 

 

 

transform이란

   - https://developer.mozilla.org/ko/docs/Web/CSS/transform

transform - CSS: Cascading Style Sheets | MDN

   - 요소에 회전, 크기조절, 기울이기, 이동효과를 부여할 수 있습니다.

   - 시각적 서식 모델의 좌표 공간을 변경합니다.

   - transform을 사용해 요소를 변경하더라도, 원본 요소가 바뀌는것은 아닙니다.

 

 

사용

transform: matrix(1,2,3,4,5,6);

transform: translate(120px, 50%);

transform: scale(2, 0.5);

transform: rotate(0.5turn);

transform: skew(30deg, 20deg);

transform: scale(0.5) translate(-100%, -100%);

 

   - 함수 요소를 입력하여 효과를 나타냅니다.

   - 여러 transform 값을 입력 시 오른쪽(이후에 적은 요소)부터 적용됩니다.

   - transform 순서에 따라 출력되는 결과가 달라질 수 있습니다.

 

 

   1. scale

      - selection의 크기를 변화시키는 transform 요소입니다.

      - 하나의 값을 입력하여 전체 비율을 조정할수도, x축 크기와 y축 크기를 따로 설정할 수도 있습니다.

      - 음수값을 입력하면 반전됩니다.

      - 평면 크기만 조절되므로 3D크기를 조절하기 위해서는 scale3d()를 대신 사용해야합니다.

 

   2. rotate

      - selection을 회전시키는 transform 요소입니다.

      - angle, 각도 값을 입력하여 조정할 수 있습니다.

 

   3. translate

      - selection의 위치를 변화시키는 transform 요소입니다.

      - x축, y축 이동 값을 입력하여 값을 이동시키며, 하나의 값만 입력 시 x축만 이동합니다.

 

   4. skew

      - selection의 기울기를 변화시키는 transform 요소입니다.

         > 마치 모서리를 잡고 특정 각도로 당기는것처럼 변합니다.

      - x축 기울기와 y축 기울기를 입력하여 조정할 수 있으며,

         각도를 입력하여 해당 각도로 기울기를 조정할 수도 있습니다.

 

   5. transform-origin

      - transform을 수행하는 기준점을 변경하는 transform 요소입니다

      - 기본값은 정중앙인 center입니다.

      - top, bottom, right, left 로 해당 모서리 중앙으로 기준점을 변경할 수 있으며,

         두 값을 사용하여 꼭짓점으로 변경할 수도 있습니다.

      - 수치를 적용하여 기준점을 변경할 수도 있습니다.