CSS3 변환의 스케일 스케일링 분석

이 글은 주로 CSS3 변환에서 스케일링의 사용을 소개합니다. 필요한 친구들은 참고하면 됩니다

세 가지 측면에서 시작하겠습니다:

1. scale(x,y)는 요소의 크기를 조정합니다.

X는 확대/축소를 나타냅니다. 가로 방향의 계수 | Y는 세로 방향의 확대/축소 비율을 나타냅니다.
Y는 선택적 매개변수로 설정되지 않은 경우 X 및 Y 방향의 확대/축소 비율이 동일하다는 의미입니다. 그리고 X의 적용을 받습니다.
transform:scale(2,2.5);
2. scaleX() 요소는 X축(가로 방향)으로만 요소의 크기를 조정합니다.
기본값은 1이고 기준점은 여전히 ​​요소의 중심에 있습니다. 기준점은 변환 원점
transform:scaleX(2)
3을 통해 변경할 수 있습니다. scaleY() 요소는 Y축(세로 방향)에서만 요소의 크기를 조정합니다.
기준점도 요소의 중심에 있습니다. 기준점은 변환 원점을 통해 변경할 수 있습니다.
transform:scaleY(2);

마지막으로 호환성 작성 방법을 살펴보겠습니다.

코드는 다음과 같습니다.

.test{  
  -moz-transform:scale(2,2);  
  -webkit-transform:scale(2,2);  
  -o-transform:scale(2,2);  
  background:url(img/i.png) no-repeat;    
  width:198px;  
  height:133px;   
}

위 내용이 이 글의 전체 내용이길 바랍니다. 모든 분들의 학습에 도움이 될 것입니다. 더 많은 관련 내용이 있으니 PHP 중국어 홈페이지를 주목해주세요!

관련 추천:

CSS

CSS

🎜🎜🎜🎜CSS🎜🎜의 before 및 :after 의사 요소 사용에 대한 분석

위 내용은 CSS3 변환의 스케일 스케일링 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!