CSS - transform 속성 정리

transform 속성은 이미 만들어진 태그, 혹은 이미지를 늘리거나 회전시킬때 사용

 

 

translate(이동)

---

 

translate는  x축 과 , y축으로 지정한 값만큼 이동시킨다. 

See the Pen Untitled by dahye (@dahyekim0311) on CodePen.

 

translate  z 축?

 

이미지 출처 : https://tympanus.net/codrops/css_reference/transform/

 

 

 

See the Pen Untitled by dahye (@dahyekim0311) on CodePen.

 

 

 

 

 

perspective(원근법) 속성

perspective는 3D 장면의 깊이가 렌더링 되는 방법을 정의한다.

viewer에서 대상까지의 거리라고 생각하자. 값이 클수록 거리가 멀어진다.

 요소에 perspective속성을 정의 할때, 원근법 view를 가져오는 것은 자식 요소이다.

 

 

 

 

 

 

 

 

 

scale (늘리고, 줄이고)

---

 

scale은 요소의 크기를 변경하는 태그이고 좌우, 상하로 늘어난다. sacle(X,Y)로 입력해 사용한다. 

단위는 기존의 사이즈이 몇배 이런식으로 나타나므로 예시를 참고하자.

 

 

 

See the Pen Untitled by dahye (@dahyekim0311) on CodePen.

 

 

 

rotate(회전)

---

rotate는 괄호에 각도 만큼 회전만드는 태그이다. 각도의 단위는 deg이다.

 

See the Pen Untitled by dahye (@dahyekim0311) on CodePen.

 

 

 

 

skew(왜곡)

---

skew는 요소를 왜곡하는 것을 뜻한다.

skew(x,y)와 같이 사용하고 단위는 deg를 사용해서 원하는 각도만큼 왜곡시킬 수 있다. 

 

 

 

See the Pen Untitled by dahye (@dahyekim0311) on CodePen.