CSS3에서 scale() 메소드의 첫 번째 매개변수는 가로 방향을 따른 요소의 배율 조정 배수를 채우고, 두 번째 매개변수는 세로 방향을 따른 요소 배율 조정의 배수를 채웁니다. 구문은 "변환: 배율(x,y)".
이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
scale() 메서드
Scale은 "확대", "확대"를 의미합니다. CSS3에서는 scale() 메서드를 사용하여 중심 원점을 기준으로 요소의 크기를 조정할 수 있습니다.
translate() 메서드와 유사하게 scale() 메서드에도 세 가지 상황이 있습니다.
(1) scaleX(x): 요소는 가로로만 크기가 조정됩니다(X축 크기 조정).
(2) scaleY( y): 요소의 크기는 세로 방향으로만 조정됩니다(Y축 크기 조정)
(3) scale(x,y): 요소의 크기는 가로 및 세로 방향으로 동시에 조정됩니다(X축 및 Y-
1, scaleX(x)
Syntax
transform:scaleX(x)
설명:
x는 수평 방향(X축)에 따른 요소의 배율을 나타냅니다. 1보다 작으면 확대, 1보다 작으면 축소를 의미합니다.
배수 개념을 생각해보면 이해하기 쉽습니다.
2.scaleY(y)
구문:
transform:scaleY(y)
설명:
y는 수직 방향(Y축)에 따른 요소의 배율을 나타냅니다. 1보다 크면 확대를 의미합니다. 1보다 작으면 감소한다는 의미입니다.
3.scale(x,y)
구문:
transform:scale(x,y)
설명:
x는 가로 방향(X축)을 따라 요소 크기 조정의 배수를 나타내고, y는 가로 방향(X축)을 따라 요소 크기 조정을 나타냅니다. 세로 방향(Y축)의 배수입니다.
Y는 선택적 매개변수입니다. Y 값이 설정되지 않은 경우 X 및 Y 방향의 배율 계수가 동일하다는 의미입니다(동일한 계수를 확대함).
예:
<!DOCTYPE html> <html> <head> <title>CSS3缩放scale()用法</title> <style type="text/css"> /*设置原始元素样式*/ .main { margin:100px auto;/*水平居中*/ width:300px; height:200px; border:1px dashed gray; } /*设置当前元素样式*/ #jb51 { width:300px; height:200px; color:white; background-color: #3EDFF4; text-align:center; transform:scaleX(1.5); -webkit-transform:scaleX(1.5); /*兼容-webkit-引擎浏览器*/ -moz-transform:scaleX(1.5); /*兼容-moz-引擎浏览器*/ } /*普通方便对比*/ #jbzj { width:300px; height:200px; color:white; background-color: #3EDFF4; text-align:center; } </style> </head> <body> <div class="main"> <div id="jb51">1</div> </div> <div class="main"> <div id="jbzj">2</div> </div> </body> </html>
크롬 브라우저의 미리보기 효과는 다음과 같습니다.
분석:
위 그림에서 볼 수 있듯이 요소가 X축 방향으로 1.5배 확대됩니다(둘 다). 방향이 동시에 확장되어 전체가 1.5배로 확대됩니다.
transform:scaleY (1.5); -webkit-transform:scaleY(1.5); /*兼容-webkit-引擎浏览器*/ -moz-transform:scaleY(1.5); /*兼容-moz-引擎浏览器*/
위 코드 사용 시 브라우저 미리보기 효과는 다음과 같습니다.
(동영상 공유 학습: css 동영상 튜토리얼)
위 내용은 CSS3에서 스케일을 채울 내용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!