CSS3 생성기 변환: 크기 조정, 회전, 번역 및 기울이기

CSS3.0 Transform

게으른 사람들을 위한 CSS 변환 생성기.

배율을 설정하고, 회전하고, 번역하고, 기울이고 실시간 미리보기를 시청하여 원하는 보기를 얻으세요.

미리 보기가 설정 패널을 덮을 수 있으므로 기울이기 속성에 대해 극단적인 값을 설정하지 마십시오. 이 경우 페이지를 새로 고쳐야 합니다.

 

크기 조정, 회전, 변환 및 기울이기

배율은 대상 요소를 확대 및 축소하는 것처럼 작동합니다. 기본 배율 값은 원래 크기의 승수로 작동하는 1입니다. 즉, 0.5는 절반이 되고 2는 섹션이 두 배가 됩니다.

 

각도로 설정된 두 번째 속성을 사용하여 요소를 시계 방향으로 회전합니다. 180° 회전하면 물체를 거꾸로 놓고 360° 회전하면 원래의 수직 위치로 돌아갑니다. 양수 또는 음수 값 또는 소수를 설정하십시오.

 

번역은 원래 위치와 관련된 픽셀로 요소를 이동합니다. 회전 속성이 있는 경우 X 값은 가로로 Y는 세로로 0입니다.

 

수평(X) 또는 수직(Y) 축에서 개체를 기울이십시오.

 

CSS 변환 설명 

transform CSS 속성을 사용하면 요소를 회전, 크기 조정, 기울이기 및 번역할 수 있습니다. CSS 시각적 서식 모델의 좌표 공간을 수정합니다.

정의 및 사용

transform 속성은 2D 또는 3D 변형을 요소에 적용합니다. 이 속성을 사용하면 요소를 회전, 크기 조정, 이동, 기울이기 등을 할 수 있습니다.

브라우저 지원

표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

-webkit-, -moz- 또는 -o- 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.

통사론
transform: none|transform-functions|initial|inherit;