CSS3에서 스케일을 채울 내용
- WBOY원래의
- 2022-03-16 11:12:292184검색
CSS3에서 scale() 메소드의 첫 번째 매개변수는 가로 방향을 따른 요소의 배율 조정 배수를 채우고, 두 번째 매개변수는 세로 방향을 따른 요소 배율 조정의 배수를 채웁니다. 구문은 "변환: 배율(x,y)".
이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
css3에서 scale을 채울 내용
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!