CSS3 アニメーション属性シリーズの変換の詳細 scaling_html/css_WEB-ITnose

3 つの 側面から始めましょう:

1, scale(x,y) 要素のスケール

X は

水平方向を表します

スケーリング倍数 | を表しますのスケーリング係数垂直方向 Y は

オプションのパラメータ

です。設定されていない場合は、X 方向と Y 方向の倍率が同じであることを意味します。そしてXの対象。

CSS コード

transform:scale(2,2.5); 2. scaleX()

要素X 軸上の要素のみをスケーリングします (水平方向）。

デフォルト値は 1 で、基点も要素の中心になります。基点は、transform-origin

CSS コード

transform:scaleX(2) によって変更できます。 3.

scaleY( )

要素はオンのみですY 軸 (垂直方向) で要素をスケールします。

基点も要素の中心にあります。基点は、transform-origin を通じて変更できます。

CSS コード

transform:scaleY(2);

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

:

1. CSS コード

。テスト{

-moz-transform:scale(2,2);

-o-transform:scale(2,2); img/i.png) 繰り返しなし;

幅:198px;

}