CSS에서 확대/축소를 설정하는 방법-CSS 튜토리얼-php.cn

CSS에서 확대/축소를 설정하는 방법

醉折花枝作酒筹

풀어 주다： 2023-01-05 16:10:29

원래의

31612명이 탐색했습니다.

CSS에서는 transfrom 속성의 scale() 메서드를 사용하여 크기 조정을 설정할 수 있으며 구문 형식은 "transfrom:scale(direction)"입니다. scale() 메소드는 벡터 형태로 정의된 스케일링 값을 통해 요소의 크기를 수정하거나 요소를 확대하거나 축소하는 데 사용되며, 서로 다른 방향으로 다른 스케일링 값을 설정할 수 있습니다.

CSS에서 확대/축소를 설정하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS3에서는 요소의 크기 조정 효과를 얻기 위해 변형 속성의 scale() 메서드를 사용할 수 있습니다. 줌(Zoom)은 '줌 아웃', '줌 인'의 의미를 가리킨다.

구문:

transform: scaleX(x);         /*沿X轴方向缩放*/
transform: scaleY(y);         /*沿Y轴方向缩放*/
transform: scale(x, y);        /*沿X轴和Y轴同时缩放*/

로그인 후 복사

지침:

스케일링에는 scaleX(), scaleY(), scale()의 세 가지 상황이 있습니다. 매개변수 x는 요소의 x축 방향의 배율을 나타내고, 매개변수 y는 y축 방향의 요소의 배율을 나타냅니다.

x 또는 y 값이 0과 1 사이이면 요소가 축소되고, x 또는 y 값이 1보다 크면 요소가 확대됩니다. '다수'라는 개념을 생각해보면 금방 이해가 되실 겁니다.

예: scaleX(x)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*设置原始元素样式*/
        #origin
        {
            width:200px;
            height:100px;
            border:1px dashed gray;
        }
        /*设置当前元素样式*/
        #current
        {
            width:200px;
            height:100px;
            color:white;
            background-color: rgb(30, 170, 250);
            opacity: 0.6;
            transform:scaleX(1.5);
        }
    </style>
</head>
<body>
    <div id="origin">
        <div id="current"></div>
    </div>
</body>
</html>

로그인 후 복사

브라우저 미리보기는 아래와 같습니다.

CSS에서 확대/축소를 설정하는 방법

분석:

transform:scaleX(1.5); 요소가 x축 방향으로 1.5배 확대되었음을 의미합니다. 1.5를 0.5로 변경하면 요소가 x축 방향으로 원래 크기의 0.5배로 축소됩니다. 이때 미리보기 효과는 아래 그림과 같습니다.

CSS에서 확대/축소를 설정하는 방법

실제로 변환:scaleX(1.5);는 실제로 변환:scale(1.5, 0);과 동일할 수 있으며 친구들이 직접 테스트할 수 있습니다.

예: scaleY(y)

<!DOCTYPE html><html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*设置原始元素样式*/
        #origin
        {
            width:200px;
            height:100px;
            border:1px dashed gray;
        }
        /*设置当前元素样式*/
        #current
        {
            width:200px;
            height:100px;
            color:white;
            background-color: rgb(30, 170, 250);
            opacity: 0.6;
            transform:scaleY(1.5);
        }
    </style>
</head>
<body>
    <div id="origin">
        <div id="current"></div>
    </div>
</body>
</html>

로그인 후 복사

브라우저 미리보기는 아래와 같습니다.

CSS에서 확대/축소를 설정하는 방법

분석:

transform:scaleY(1.5); 요소가 y축 방향으로 1.5배 확대되었음을 의미합니다. 1.5를 0.5로 변경하면 요소가 y축 방향으로 원래 크기의 0.5배로 축소됩니다. 이때 브라우저 미리보기 효과는 아래 그림과 같습니다.

CSS에서 확대/축소를 설정하는 방법

실제로 변환:scaleY(1.5);는 실제로 변환:scale(0, 1.5);과 동일할 수 있으며 친구들이 직접 테스트할 수 있습니다.

예: scale(x, y)

<!DOCTYPE html><html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*设置原始元素样式*/
        #origin
        {
            width:200px;
            height:100px;
            border:1px dashed gray;
        }
        /*设置当前元素样式*/
        #current
        {
            width:200px;
            height:100px;
            color:white;
            background-color: rgb(30, 170, 250);
            opacity: 0.6;
            transform:scale(1.2, 1.5);
        }
    </style>
</head>
<body>
    <div id="origin">
        <div id="current"></div>
    </div>
</body>
</html>

로그인 후 복사

브라우저 미리보기는 아래와 같습니다.

CSS에서 확대/축소를 설정하는 방법

분석:

transform:scale(1.2, 1.5); 요소가 x축 방향과 y축 방향으로 동시에 1.2배로 확대된다는 의미입니다. 원래 크기로, y축 방향이 1.5배로 확대됩니다. 실제로, 변환:스케일(1.2, 1.5);은 실제로 다음 코드와 동일할 수 있습니다.

transform:scaleX(1.2);
transform:scaleY(1.5);

로그인 후 복사

권장 학습: css 비디오 튜토리얼

위 내용은 CSS에서 확대/축소를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!