CSS3에서 변환 속성을 사용하는 방법

CSS3의 transform 속성은 다들 잘 아시겠지만 자주 사용하기 때문에 오늘은 이 변환의 사용법과 사용법, 변환 구문에 대해 자세히 분석하겠습니다.

구문: ​​none|[]* 초기 값은 없음입니다.

transform-functionfunctionvalue:

matrix(): 행렬 변환을 정의합니다.

translate(): 요소 object를 이동합니다.

scale(): 크기 조정 요소 개체입니다.

rotate(): 요소 개체를 회전합니다.

skew(): 요소 개체를 기울입니다.

예(호환 브라우저):

1.rotate() 함수: 변환: 회전(-90deg);-o-transform: 회전(-90deg);-moz-transform: 회전(-90deg);-webkit -변형: 회전(-90도);필터:progid:DXImageTransform.Microsoft.BasicImage(회전=3);

2.scale() 함수: 변환: scale(2);-o-transform: scale(2); -moz-transform: scale(2);-webkit-transform: scale(2);

scale에 대해 서로 다른 매개변수 값이 전달되면 스케일링animation 효과가 달라집니다. scale(1,2)은 너비는 변경되지 않고 높이는 원래 크기의 두 배가 됨을 의미합니다. scale(1,-2)은 너비가 변경되지 않고 높이가 두 배로 증가하고 180도 회전됨을 의미합니다.

3.translate() 함수: 변환: 번역(4px, 6px);-o-변환: 번역(4px, 6px);-moz-transform:translate(4px, 6px);-webkit-transform: 번역(4px) , 6px) 매개변수는 음수 픽셀 값일 수 있습니다.

4.skew() 함수: 변환: 기울이기(30deg, -20deg);-o-transform: 기울이기(30deg, -20deg);-moz-transform: 기울이기(30deg, -20deg);-webkit-transform: Skew(30deg, -20deg); 요소의 모양을 변경하지만 회전 기능은 요소의 모양을 변경하지 않습니다.

5.matrix() 함수: 변환: 행렬(3,2,3,5,0,0);-o-변환: 행렬(3,2,3,5,0,0);-moz-변환 : 매트릭스(3,2,3,5,0,0);-webkit-transform: 매트릭스(3,2,3,5,0,0);매개변수는 6개 값입니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

CSS3 번역 속성에 대한 자세한 소개

CSS3 배경 크기 속성에 대한 자세한 소개

CSS3에서 변환 속성 사용에 대한 튜토리얼

위 내용은 CSS3에서 변환 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!