[CSS] 상하반전, 좌우반전, 크기조절 - scale, scaleX, scaleY 속성

scale은 보통 크기 조절을 할 때 쓰는 속성이라고 알고 있을 것이다. 그런데 scale로도 상하좌우 반전을 할 수 있다.

음수 값을 주면 된다.

상하반전 - scaleY

transform: scaleY(-1);

좌우반전 - scaleX

transform: scaleX(-1);

scale로 한번에 모두 설정

* 반전도 시키면서 크기 조절을 하고 싶으면 값을 크거나 작게 조절 하면 됨

 

• 상하좌우 모두 반전

transform: scale(-1);
// 또는
transform: scale(-1, -1);

• 좌우만 반전시키고 싶을 때

transform: scale(-1, 1);

• 상하만 반전시키고 싶을 때

transform: scale(1, -1);

• 좌우로 2배로 늘리면서 높이는 0.5배로 줄이는 동시에 상하반전

transform: scale(2, -0.5);