CSSでズームを設定する方法-CSSチュートリアル-php.cn

CSSでズームを設定する方法

醉折花枝作酒筹

リリース： 2023-01-05 16:10:29

オリジナル

31641 人が閲覧しました

CSS では、transfrom 属性のscale() メソッドを使用してスケーリングを設定できます。構文形式は「transfrom:scale(direction)」です。 scale() メソッドは、要素のサイズを変更するために使用され、ベクトル形式で定義されたスケーリング値を通じて要素を拡大または縮小し、異なる方向に異なるスケーリング値を設定できます。

CSSでズームを設定する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

CSS3 では、transform 属性のscale() メソッドを使用して、要素のスケーリング効果を実現できます。 Zoomとは「ズームアウト」「ズームイン」という意味です。

構文:

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

ログイン後にコピー

説明:

スケーリングには、scaleX()、scaleY()、scale() の 3 つの状況があります。パラメータｘは要素のｘ軸方向の倍率を表し、パラメータｙは要素のｙ軸方向の倍率を表す。

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でズームを設定する方法

実際、transform:scaleX(1.5); は実際には、transform: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でズームを設定する方法

実際、transform:scaleY(1.5); は実際には、transform: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 軸方向の両方に拡大されることを示します。同時に、x 軸方向は 1.2 倍、y 軸方向は 1.5 倍に拡大されます。実際、transform:scale(1.2, 1.5); は実際には次のコードと同等になります:

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

ログイン後にコピー

推奨学習: css ビデオチュートリアル

以上がCSSでズームを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。