CSS의 Transform 정리

CSS의 속성들의 정보 정리 첫번째 Transform

CSS의 속성 목록

• transform
  
• position
  
• display: inline-block
  
• transition
  
• z-index
  
• height: inherit
  

transform

CSS의 transform 속성은 HTML 요소의 모양을 변형시키는 데 사용됩니다. 이 속성을 통해 요소에 회전(rotate), 크기 조정(scale), 이동(translate), 기울임(skew), 그리고 원근감(perspective) 등의 효과를 적용할 수 있습니다. transform 속성은 복잡한 애니메이션과 효과를 만들 때 자주 사용되며, 사용자 인터페이스의 개선과 시각적 관심을 끄는 요소를 만드는 데 유용합니다.

기본 구문

transform: none|transform-functions;

• none: 변형 없음.
  
• transform-functions: 변형 함수들을 지정합니다. 여러 함수를 공백으로 구분하여 순서대로 적용할 수 있습니다.
  

변형 함수	코드	설명
회전(Rotate)	transform: rotate(45deg);	주어진 각도만큼 요소를 시계 방향으로 회전합니다.
크기 조정(Scale)	transform: scale(2, 3)	요소의 크기를 가로(sx)와 세로(sy) 방향으로 조정합니다. sy가 생략되면 sx와 같은 값으로 적용됩니다.
이동(Translate)	transform: translate(50px, 100px)	요소를 가로(tx)와 세로(ty) 방향으로 이동시킵니다. ty가 생략되면 0으로 적용됩니다
기울임(Skew)	transform: skew(30deg, 20deg)	요소를 가로(ax)와 세로(ay) 방향으로 기울입니다. ay가 생략되면 0으로 적용됩니다.
원근감(Perspective)	transform: perspective(500px) rotateX(45deg);	3D 변환 요소에 원근감을 추가합니다.
3D 변환	transform: rotate(45deg) translate(100px, 50px) scale(1.5);	3D 변환을 위한 함수들도 있습니다(rotateX, rotateY, rotateZ, scaleZ, translateZ 등).