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개의 매개변수가 있습니다.

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <style> div { margin:30px; width:200px; height:100px; background-color:#00ff00; /* Rotate div */ transform:rotate(9deg); -ms-transform:rotate(9deg); /* Internet Explorer */ -moz-transform:rotate(9deg); /* Firefox */ -webkit-transform:rotate(9deg); /* Safari 和 Chrome */ -o-transform:rotate(9deg); /* Opera */ } </style> </head> <body> <div>Hello World</div> </body> </html>

코드 재설정

자동운전

제출하다

시사 Clear