ホームページ > 記事 > ウェブフロントエンド > css3.0 新しい属性 learning_html/css_WEB-ITnose
変換 変換 (スタイル で定義する必要があります): 変位、スケーリング、回転、ベベル (歪み)
属性は次のとおりです:1. ディスプレイスメント: translate
(0px
, 0px ) 属性値: (0px, 0px
) 要素が x 軸、y 軸の座標変位、 2 番目の値は指定する必要はありません。指定しない場合は、デフォルトの 0 になります。 2、スケール: scale (.5, .5)
属性値: (.5, .5) の後にカンマで区切られた 2 つの小数点 (パーセンテージ) が括弧内に続き、要素の中心点は次のとおりです。スケーリングの基点として使用されます。x 軸と y 軸の座標に沿って要素を比例的にスケーリングします。そうでない場合は、デフォルトで 0 が設定されます。
。转旋 3、回転:Rotate
(5deg
)
またはRotate (1rad) Rad: 円弧、 Deg: 度。 要素の左上隅を基点として、値を押して時計回りに回転します。 原点のリセット: transform-origin:0 0;
Origin
の後に2つのnumberが続くと、
要素はx軸とy軸に沿った回転原点をリセットします。4、ベベル(歪み): skew(1rad,1rad)
属性値: (1rad,1rad)
括弧内には2つのラジアン値がありますraに歪みの程度を決定します。その値はそれぞれ x 軸と y 軸に対応します。2 番目の値を指定する必要はありません。指定しない場合は、デフォルトで 0 になります。
( はスタイルで定義する必要があります)
過剰 --- キーワード:transition 4 つの値に従います: Transitation: [Transition-ProPERTY] || [移行期間]||
[transition-timing-function]||[transition-delivery];
つまり:transition: all 4s Linear 2s;
それらの値の意味は次のとおりです:1. プロパティ: 遷移に関係するオブジェクトのプロパティを取得または設定します。値の範囲は次のとおりです:
All (デフォルト値): 遷移できるすべての CSS プロパティ。None: 過剰な CSS 属性を指定しません。
2、duration: オブジェクトの遷移の継続時間を取得または設定します。値の範囲は次のとおりです:
time: オブジェクトの遷移の継続時間を指定します。
3. タイミング関数: オブジェクトのトランジション アニメーション タイプを取得または設定します。その値の範囲は次のとおりです (リスト 5):
linear: 線形トランジション。
簡単: 滑らかに仕上げます。
イーズイン: 低速から高速まで。
イーズアウト: 速いものから遅いものまで。
イーズインアウト: 低速から高速、そして再び低速へ。
4、遅延: オブジェクトの遅延が過剰になる時間を取得または設定します。値の範囲は次のとおりです。
time: オブジェクトが過剰になる時間を指定します。
以下は過剰なコード実装の例です:
| |
| |
| |
.out { |
|
幅: 800px; |
|
パディング: 1px; | |
背景色: #999999; | |
| |
.out div { |
|
幅: 100 ピクセル; | 高さ: 100 ピクセル;
|
背景色: #21bbca; | |
font-size: 12px; | |
text-align: center; | |
line-height | |
-webkit-transition: すべて 4 のリニア; | |
}
| |
.inner2 {
| |
-webkit-transition: all 4 秒の簡単さ;
| |
}
| |
.inner3 { |
|
-webkit-transition: 4 つすべてイーズイン; |
|
} |
|
.inner4 { |
|
-webkit-transition: all 4s easy-out; |
|
} |
|
.inner5 { |
|
-webkit-transition: all 4s easy-in-out; |
|
} |
|
| |
| |
| |
| |
| |
| 頭>|
| <体>|
| |
| |
| |
由ゆっくり到快 | |
由快到ゆっくり | |
由快到遅< ;/div> | |
| |
|
关键字:animation 属性の有:
1、名前:検索または設定オブジェクトに適用されたアニメーション名、取得範囲の有:
none:いかなるアニメーション名も参照しません。 アニメーション名が @keyframes によって提供されるため、@keyframes と併用する必要があります
2、期間: アニメーションの検索または設定の継続時間。
時間: 時間。
3、-タイミング-機能:検索または設置アニメの
4、遅延:アニメーションの検索または設定の遅延。
5 count: オブジェクトアニメーションの検索または設定の循環回数。
無限: 無制限循環。
番号: アニメーション画の特定の循環回数。
6 、方向: 循環中のアニメーション画の検索または配置が逆方向に移動するかどうか。 Normal: 通常の方向。
Alternate: 通常と逆方向。