CSS3は、ズームと回転を実現するためにscale()とrotate()を使用します。

1. scale() メソッド

ズームとは「縮小」と「拡大」を意味します。 CSS3 では、scale() メソッドを使用して、中心の原点に基づいて要素を拡大縮小できます。

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

（１）scaleX(x): 要素は水平方向にのみ拡大縮小される（X軸の拡大縮小）。
（２）scaleY(y): 要素は垂直方向にのみ拡大縮小される（Y軸の拡大縮小）。
（３）scale(x,y): 要素は水平方向と垂直方向に同時に拡大縮小されます（X軸とY軸は同時に拡大縮小されます）。

1.スケールX(x)

文法：

変換:スケールX(x)

例:

x は、要素の水平方向のスケーリング (X 軸) の倍数を表します。1 より大きい場合はズームインを意味し、1 より小さい場合はズームアウトを意味します。
倍数の概念を考えれば簡単に理解できます。

2.スケールY(y)

文法：

変換:スケールY(y)

例:

y は、要素の垂直方向 (Y 軸) に沿った拡大率を表します。1 より大きい場合は拡大を意味し、1 より小さい場合は縮小を意味します。

3.スケール(x,y)

文法：

変換:スケール(x,y)

例:

x は水平方向 (X 軸) に沿った要素の倍数を表し、y は垂直方向 (Y 軸) に沿った要素の倍数を表します。
Y はオプションのパラメータであることに注意してください。Y 値が設定されていない場合は、X 方向と Y 方向のスケーリング係数が同じであることを意味します (同時に同じ倍数で拡大されます)。

例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド> 
    <title>CSS3 スケーリング () の使用法</title>
    <スタイル タイプ="text/css">
        /*元の要素のスタイルを設定する*/
        。主要
        {
            margin:100px auto;/*水平中央*/
            幅:300ピクセル;
            高さ:200px;
            border:1px 破線グレー;
        }
        /*現在の要素のスタイルを設定する*/
        #jb51
        {
            幅:300ピクセル;
            高さ:200px;
            色：白;
            背景色: #3EDFF4;
            テキスト配置:中央;
            変換:スケールX(1.5);
            -webkit-transform:scaleX(1.5); /*-webkit-engine ブラウザと互換性あり*/
            -moz-transform:scaleX(1.5); /*-moz-engine ブラウザと互換性あり*/
        }
		/*普通で便利な比較*/
		 #jbzj
        {
            幅:300ピクセル;
            高さ:200px;
            色：白;
            背景色: #3EDFF4;
            テキスト配置:中央;
        }
    </スタイル>
</head>
<本文>
    <div class="main">
        <div id="jb51">123WORDPRESS.COM1</div>
    </div>
    <div class="main">
        <div id="jbzj">123WORDPRESS.COM2</div>
    </div>
</本文>
</html>

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

分析:

上の図からわかるように、要素は X 軸に沿って 1.5 倍に拡大されます (両方向に同時に拡張されるため、全体の拡大は 1.5 倍になります)。

変換:スケールY(1.5);
-webkit-transform:scaleY(1.5); /*-webkit-engine ブラウザと互換性あり*/
-moz-transform:scaleY(1.5); /*-moz-engine ブラウザと互換性あり*/

上記のコードを使用すると、ブラウザでのプレビュー効果は次のようになります。

CSS3はscale()を通じてズーム機能を実装します

rotate() による回転関数の実装

rotate() 関数は、指定された角度パラメータだけ要素を原点に対して回転します。主に 2 次元空間で動作し、角度値を設定して回転の振幅を指定します。この値が正の場合、要素は原点に対して時計回りに回転します。この値が負の場合、要素は原点に対して反時計回りに回転します。次の図に示すように:

HTMLコード:

<div class="wrapper">
  <div></div>
</div>

CSSコード:

.ラッパー{
  幅: 200ピクセル;
  高さ: 200px;
  境界線: 1px の赤い点線;
  マージン: 100px 自動;
}
.ラッパーdiv {
  幅: 200ピクセル;
  高さ: 200px;
  背景: オレンジ;
  -webkit-transform: 回転(45度)。
  変換: 回転(45度);
}

実証結果

トランジションでは、要素が変化するのに必要な時間を設定できます。

HTMLの構造コード

<ul>
<li><img src="image/1.jpg" ></li>
<li><img src="image/2.jpg" ></li>
<li><img src="image/3.jpg" ></li>
</ul>

CSS3 スタイル

ul{ 
上マージン:50px; 
リストスタイル:なし; 
} 
ul li{ 
幅:200px; 
高さ:150px; 
フロート:左; 
左マージン:10px; 
-webkit-transition:すべて1; 
-moz-transition:すべて 1; 
-o-transition:すべて1; 
} 
ul li:hover{ 
-webkit-transform:スケール(1.5)回転(10度); 
-moz-transform:スケール(1.5)回転(10度); 
-o-transform:スケール(1.5)回転(10度); 
} 
li 画像{ 
幅:100%; 
高さ:100%; 
}

上記は、CSS3 が scale() と rotate() を使用して拡大と回転を実現する方法の詳細です。CSS3 の拡大と回転の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

<<: MySQLは1億のテストデータを素早く挿入します

>>: Vue ミックスインの詳しい説明