CSS - Transform 속성

Transform

 

/* 키워드 값 */
transform: none;

/* 함수 값 */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

 

 

- 주로 사용하는 것

 

translate(x, y)

= 위치 이동.

 

x축으로 얼마만큼? y축으로 얼마만큼?

- 원래 위치를 기억하므로 주변 요소에 영향 X

 

position: absolute를 가운데 배치할때 사용했었음.

 

함수 안에 px을 넣어줄수도 있지만,
퍼센트(%)도 넣어줄 수 있음.
CSS에서 보통은 퍼센트는 부모요소의 비례하는 크기지만,
translate에서는 자기자신의 크기의 %이다.

 

translateX()

translateY()

로 나눠서 설정도 가능.

 

 

 

position: relative랑 

transform: traslate(X,Y)랑 뭐가 다른지?

 

❕❕ 참고
포지셔닝(positioning)과 translate의 차이

- 포지셔닝 같은 경우는 다른 엘리먼트에 영향을 끼친다.
- translate은 다른 요소에 영향을 끼치지 않고 좌표공간만 변형하여 이동한다.

** 렌더링 / 페인팅 측면에서도 포지셔닝이 더 무거운 느낌.

움직이는 모션의 경우에는 translate이 더 적합함. (애니메이션)

 

 

 

scale()

 

= 사이즈 키우고 줄임

+값	사이즈 증가
-값	사이즈 감소

 

- 마찬가지로 자신의 원래 크기를 기억하므로

다른 요소에 영향을 주지는 않는다.

 

- 마찬가지로 scaleX와 scaleY로 쪼갤 수 있음.

- scale()안에 두개를 한꺼번에 넣어도 됨.

transform: scale(0.5);
transform: scale(0.5, 2);
transform: scaleX(3);

 

 

rotate()

transform: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);

보통은 deg 단위를 사용한다.

(turn도 사용하긴 함)

 

 

 

 

 

 

** 잘 사용하진 않지만, 주로 position:absolute 가운데 배치시 사용함.

 

.parent {
   position: relative;
}

.child {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

/* position : fixed 고정시에도 */

.fixed {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

 

 

 

 

 

---

REF>

transform - CSS: Cascading Style Sheets | MDN