Transform Generator
CSS의 transform은 해당 요소의 크기와 X,Y,Z축을 기준으로 회전및 좌표이동 등의 값을 조정하는 속성이다. transform을 사용하면 2D 또는 3D 변형을 적용하여 요소를 시각적으로 변형시킬 수 있다.
transform은 다양한 변형 함수를 사용하여 요소를 조작할 수 있는데, 이러한 함수에는 scale(크기), rotate(회전), translate(이동), skew(비틀기) 등이 포함된다. 이러한 변형 함수를 조합하여 원하는 효과를 만들 수 있다.
.box { transform:scale(1.1) rotate(10deg) translateX(10px) translateY(10px) skewX(10deg) skewY(10deg); }
Transform의 특징
요소의 위치 조정: transform을 사용하여 요소를 이동시킬 수 있다. translate 함수를 사용하여 요소를 수평 또는 수직으로 이동시킬 수 있으며, 이를 통해 레이아웃을 조정하거나 요소들을 정렬할 수 있다.
요소의 크기 조정: transform을 사용하여 요소의 크기를 조정할 수 있다. scale 함수를 사용하여 요소를 확대 또는 축소시킬 수 있고, 이를 통해 요소의 크기를 동적으로 조절할 수 있다.
요소의 회전 및 비틀기: transform을 사용하여 요소를 회전하거나 비틀 수 있다. rotate 함수를 사용하여 요소를 시계 방향 또는 반시계 방향으로 회전시킬 수 있으며, skew 함수를 사용하여 요소를 비틀 수 있다.
3D 변형: transform을 사용하여 요소에 3D 변형을 적용할 수 있다. translate3d, rotate3d, scale3d와 같은 함수를 사용하여 요소를 3D 공간에서 이동, 회전, 확대/축소할 수 있고 이를 통해 더 다이나믹하고 현실적인 효과를 구현할 수 있다.