ホームページ > 記事 > ウェブフロントエンド > css3.0 新しい属性 learning_html/css_WEB-ITnose
css3.0 新しい属性 learning_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:41:181110ブラウズ
変換 変換 (スタイル で定義する必要があります): 変位、スケーリング、回転、ベベル (歪み)
属性は次のとおりです: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: オブジェクトが過剰になる時間を指定します。
以下は過剰なコード実装の例です: