CSS3変換におけるスケールスケーリングの解析

この記事では主に CSS3 変換におけるスケール スケーリングの使用方法を紹介します。必要な方は参考にしてください。

3 つの側面から始めます:

1. 要素をスケールするためのスケール(x,y)

X はズームを表します。水平方向の倍率 | Y は垂直方向のズーム倍率を表します
Y が設定されていない場合は、X 方向と Y 方向のズーム倍率が同じであることを意味します。そしてXの対象となります。
transform:scale(2,2.5);
2.scaleX() 要素は、X 軸 (水平方向) の要素のみをスケールします。
デフォルト値は 1 で、基点は依然として要素の中心にあります。基点は、transform-origin
transform:scaleX(2);
3 を通じて変更できます。scaleY() 要素は、Y 軸 (垂直方向) 上でのみ要素をスケールします。
基点も要素の中心にあります。基点は、transform-origin を通じて変更できます。
transform:scaleY(2);

最後に、互換性の記述方法を見てみましょう:

コードは次のとおりです:

.test{  
  -moz-transform:scale(2,2);  
  -webkit-transform:scale(2,2);  
  -o-transform:scale(2,2);  
  background:url(img/i.png) no-repeat;    
  width:198px;  
  height:133px;   
}

以上がこの記事の内容です。皆様の学習に役立つその他の関連コンテンツ PHP 中国語 Web サイトにご注目ください。

関連する推奨事項:

CSS の背景と背景位置の分析

CSS の before および :after 疑似要素の使用についての分析

以上がCSS3変換におけるスケールスケーリングの解析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。