콘텐츠 모양을 자유롭게 변형하기

CCS3의 transform 속성을 사용해 HTML 요소를 다양하게 변형

• transform (2D)
  • scale : 선택한 요소의 크기를 확대,축소
  • skew : 선택한 요소를 x축 또는 y축으로 비틀어서 변형
  • translate : 선택한 요소를 현재 위치 기준으로 x,y축으로 이동
  • rotate : 선택한 요소 회전
• transform (3D)
  • rotateX , rotateY : 선택한 요소를 x,y축으로 입체감 있게 회전
  • translateZ : 선택한 요소를 z축으로 입체감있게 이동
• perspective
  • px : 3D가 적용된 요소가 입체감 있도록 부모 요소에 perspective속성 적용해 원근감 부여
• transform-style
  • preserve-3d : 3D 효과가 적용된 요소의 모션 처리를 하면 3D효과가 풀리는데 부모요소에 이 속성값을 쓰면 3D효과 유지
• transform-origin
  • 가로축,세로축 : 요소의 변형이 일어나는 중심축을 가로,세로축 기준으로 변경가능

See the Pen 콘텐츠 모양 자유롭게 변형 by 신범식 (@ulqsqjpw-the-solid) on CodePen.

※

transform의 속성에 perspective를 적용하는 이유는

perspective를 사용하지 않으면 translateZ의 변화를 느낄수 없다.

(translateZ 변화주고 싶을때 perspective 를 사용)

그러나 perspective를 사용해 원근감을 주면 차이를 느낄 수 있다.

See the Pen Untitled by 신범식 (@ulqsqjpw-the-solid) on CodePen.