[CSS] transform

transform

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

 

1. translateX(), translateY(), translateZ()

- 축 이동

- translate의 %는 부모가 아니라 나를 기준으로 적용함 (top, width는 부모가 기준임)

 

2. rotateX(), rotateY(), rotateZ()

- 축 회전

 

3. skew

- 기울기

 

4. scale

perspective

- z=0인 평면과 떨어진 거리를 나타내며, 원근감을 줌

- 값이 작을수록 가까이서 보이고, 클수록 멀리서 보임

- 회전하는 것은 멀리서 보면 더 회전 각도가 잘 보

-  transform 속성을 적용한 요소의 부모 요소에게 perspective 속성을 줌

 

 

응용: 카드 뒤집기

svg는 반응형이라 사이즈가 유동적이지만, 그냥 이미지는 고유의 본인 사이즈가 있다 부모의 사이즈보다 자식 사이즈가 클때는 오버플로우 된다. 사진 이미지가 커서 넘쳤음 카드비율 유지하기 padding-top vw는 100% 꽉채울때만 사용함

 

 

 

 

+

사이즈가 상대 단위면 위치값도 상대 단위로 하고, translate로 이동함(왜?)

---

[출처] https://developer.mozilla.org/ko/docs/Web/CSS/transform

transform - CSS: Cascading Style Sheets | MDN

https://velog.io/@wswy17/CSS-perspective-%EC%9B%90%EA%B7%BC%EB%B2%95

🎨CSS | 원근법 - perspective