ホームページ > 記事 > ウェブフロントエンド > css3でスケールに何を記入するか

css3でスケールに何を記入するか

WBOYオリジナル: 2022-03-16 11:12:292173ブラウズ

CSS3 では、scale() メソッドの最初のパラメーターは水平方向に沿った要素のスケーリングの倍数を入力し、2 番目のパラメーターは垂直方向に沿った要素のスケーリングの倍数を入力します。は「transform:scale(x,y)」です。

css3でスケールに何を記入するか

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

css3

scale()メソッドのスケールに記入する内容

スケールとは「拡大」「ズームイン」を指します。 CSS3 では、scale() メソッドを使用して、中心の原点に基づいて要素をスケールすることができます。

translate() メソッドと同様に、scale() メソッドにも 3 つの状況があります。

(1)scaleX(x): 要素は水平方向にのみスケーリングされます (X 軸スケーリング)。

(2)scaleY(y):要素は垂直方向のみにスケーリングされます (Y 軸スケーリング);

(3)scale(x,y):要素はスケーリングされます水平方向と垂直方向の両方 (X 軸は Y 軸と同時にスケールします);

1,scaleX(x)

構文

transform:scaleX(x)

説明:

#xx は要素を表します。水平方向 (X 軸) に沿ったズーム率です。1 より大きい場合はズームインを意味し、1 より小さい場合はズームアウトを意味します。

倍数の概念を考えるとわかりやすいでしょう。

2、scaleY(y)

構文:

transform:scaleY(y)

説明:

y は、要素が垂直方向に沿っていることを意味します方向 (Y 軸) ズーム率。1 より大きい場合はズームインを意味し、1 より小さい場合はズームアウトを意味します。

3.scale(x,y)

構文:

transform:scale(x,y)

説明:

xx は要素が沿っていることを意味します水平方向 (X 軸) のスケーリング係数、y は垂直方向 (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>

Chrome ブラウザでのプレビュー効果は次のとおりです:

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 中国語 Web サイトの他の関連記事を参照してください。

html5 css chrome css3 transform

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSSでリスト内の箇条書きを解除する方法次の記事：CSSでリスト内の箇条書きを解除する方法

続きを見る