CSS3 2D 변환
CSS3 변환
CSS3 변환을 통해 요소를 이동, 크기 조정, 반전, 회전 및 늘릴 수 있습니다.
어떻게 작동하나요?
변환 효과를 사용하면 요소의 모양, 크기 및 위치를 변경할 수 있습니다.
사용한 2D 또는 3D 요소를 변환할 수 있습니다.
2d 변환 transform이 장에서는 2D 변환 방법에 대해 배웁니다. ) 메소드
translate() 메소드는 왼쪽(X축) 위치와 위쪽(Y축) 위치에 지정된 매개변수에 따라 현재 요소 위치에서 이동합니다.transform: translate(50px,100px);번역 값(50px, 100px)이 왼쪽 요소에서 50픽셀, 위쪽에서 100픽셀 이동됩니다. rotate() 메서드 rotate() 메서드는 요소를 지정된 각도만큼 시계 방향으로 회전합니다. 요소가 시계 반대 방향으로 회전하는 음수 값이 허용됩니다.
transform: rotate(30deg);회전 값(30도) 요소가 시계 방향으로 30도 회전됩니다. scale() 메서드
scale() 메서드, 너비(X축) 및 높이(Y축) 매개변수에 따라 요소의 크기가 증가하거나 감소합니다.
transform: scale(2,4);
scale(2,4)는 너비를 원래 크기의 2배로 변환합니다. , 높이는 원래 크기의 4배입니다.
skew() 메서드
skew() 메서드, 이 요소는 가로(X축) 및 세로(Y축) 선 매개변수를 기반으로 각도를 제공합니다.
transform: skew(30deg,20deg);
skew(30deg,20deg )는 X축을 기준으로 하고 요소는 Y축을 기준으로 20도 및 30도입니다.
matrix() 메서드
matrix() 메서드와 2D 변환 메서드가 하나로 병합됩니다.
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
matrix 방법에는 회전, 크기 조정, 이동(이동) 및 기울기 기능을 포함한 6개의 매개변수가 있습니다.
