CSS3에서 스케일을 채울 내용-프런트엔드 Q&A-php.cn

CSS3에서 스케일을 채울 내용

WBOY

풀어 주다： 2022-03-16 11:12:29

원래의

2187명이 탐색했습니다.

CSS3에서 scale() 메소드의 첫 번째 매개변수는 가로 방향을 따른 요소의 배율 조정 배수를 채우고, 두 번째 매개변수는 세로 방향을 따른 요소 배율 조정의 배수를 채웁니다. 구문은 "변환: 배율(x,y)".

CSS3에서 스케일을 채울 내용

이 튜토리얼의 운영 환경: 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>

로그인 후 복사

크롬 브라우저의 미리보기 효과는 다음과 같습니다.

CSS3에서 스케일을 채울 내용

분석:

위 그림에서 볼 수 있듯이 요소가 X축 방향으로 1.5배 확대됩니다(둘 다). 방향이 동시에 확장되어 전체가 1.5배로 확대됩니다.

transform:scaleY (1.5);
-webkit-transform:scaleY(1.5); /*兼容-webkit-引擎浏览器*/
-moz-transform:scaleY(1.5); /*兼容-moz-引擎浏览器*/

로그인 후 복사

위 코드 사용 시 브라우저 미리보기 효과는 다음과 같습니다.

CSS3에서 스케일을 채울 내용

(동영상 공유 학습: css 동영상 튜토리얼)

위 내용은 CSS3에서 스케일을 채울 내용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!