Front-end/CSS
[CSS] 상하반전, 좌우반전, 크기조절 - scale, scaleX, scaleY 속성
페블_
2023. 2. 7. 18:45
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);