CSS3 Transform、Transition、Animation プロパティの概要

• translate(x, y) メソッドは、左 (X 軸) と上 (Y 軸) の位置で指定されたパラメーターに従って、現在の要素の位置から移動します。 x と y の値は正または負にすることができ、それぞれ異なる方向のオフセットを表します。

• rotate(angle) メソッドは、回転角度を表します。角度が正の場合、要素は時計回りに回転し、負の場合、要素は反時計回りに回転します。

• scale(x, y) メソッドは、x 軸と y 軸の要素のスケーリング率を表します。パラメーターが 1 より大きい場合、要素は拡大されます。要素が減ります。

• skew(x-angle,y-angle) メソッドは、要素を歪ませるために使用されます。最初のパラメーターは水平方向の歪み角度、2 番目のパラメーターは垂直方向の歪み角度です。 2 番目のパラメーターはオプションのパラメーターです。2 番目のパラメーターが設定されていない場合、Y 軸は 0deg

• matrix(n,n,n,n,n,n) メソッドであり、6 値の変換が行われます。行列の 2D 変換 を指定します。この属性値は、前に説明した行列

の変換メソッドをすべて使用します。つまり、デフォルトでは、要素変換の基点は要素の中心になります。ただし、異なる位置にある要素に対してこれらの操作を実行する必要がある場合は、transform-origin を使用して要素の基本位置を変更できます。この属性は 3 つのパラメータを受け取ることができます: transform-origin: x 軸、y 軸、z 軸、

x 軸、水平方向の値を表し、文字パラメータ値を左、中央に取ることができます

では、文字パラメータ値の対応するパーセンテージ値を左 = 0%、右 = 100% とすることもできます。

• y 軸は、垂直方向の値を表します。文字値

  top
、center、
• bottom

  を設定することも、文字パラメータ値に対応するパーセンテージ値を取得することもできます。上=0%、中央=50%、下=100%。 z 軸。

  view
が Z 軸上に配置される場所を示し、3D 変形で使用されます。

• 3D変換変換方法

ChromeとSafariは接頭辞-webkit-を追加する必要がありますOperaはまだ3D変換をサポートしていません（2D変換をサポートしています）。 -次元変換が使用されます。 2D 変換に基づく同じプロパティ。 CSS3 の 3D 変換 には主に次の関数が含まれます:

3D 変位: CSS3 の 3D 変位には主に 2 つの関数関数が含まれます:translateZ() と translation3d()

3D 回転: CSS3 では主に 3D 回転。回転 ;

• 3D マトリックス: CSS3 の 3D 変換にも、2D 変換と同様に 3D マトリックス関数関数 matrix3d() があります。

• 以下の変換属性もあります:

• transform-style: ネストされた要素が 3D 空間でどのように表示されるかを指定します。

• perspective: 3D 要素の遠近効果を指定します。

• backface-

  visibility
: 画面に向かっていないときに要素が表示されるかどうかを定義します。

• 現在、主要な主流ブラウザにおける Transform 3D 属性の互換性はあまり良好ではありません。興味のある読者は、自分で詳細を学ぶことができます。以下に、一般的に使用されるいくつかの関数メソッドを紹介します。
• rotateX() メソッド、X 軸の周りで要素を特定の角度で回転します。

  rotateY() メソッド、Y 軸の周りで特定の角度で要素を回転します。 () メソッドは、Z 軸を中心に要素を指定された度だけ回転します。

Transition

W3C

transition プロパティの値には、次の 4 つが含まれます。

」 transition-property: HTML 要素 のどの CSS 属性がトランジション グラデーション処理を実行するかを指定します。この属性には、color、

、height などのさまざまな標準 CSS 属性を指定できます。

transition-duration: 属性遷移の期間を指定します

• transition-timing-function: グラデーションの速度を指定します:
  1.ease: (徐々に遅くなります) デフォルト値、イーズ関数はベジェ曲線 (0.25、0.1、0.25、1.0) と同等です。 .linear: (均一速度)、線形関数はベジェ曲線 (0.0、0.0、1.0、1.0) に相当します。
  3.イーズイン: (加速度)、イーズイン関数はベジェ曲線に相当します ( 0.42, 0, 1.0, 1.0);
  4.ease-out: (減速)、ease-out 関数はベジェ曲線 (0, 0, 0.58, 1.0) と同等です。 (加速してから減速)、ease -in-out 関数はベジェ曲線 (0.42、0、0.58、1.0) と同等です
  6. cubic-bezier: (この値により時間曲線をカスタマイズできます)、特定の 3 次ベジェ曲線。 4 つの値 (x1、y1、x2、y2) は、曲線上の点 P1 および P2 に固有です。すべての値は [0, 1] の範囲内にある必要があります。そうでない場合は無効になります。
  
  

transition-lay: 遅延時間、つまり移行プロセスの開始にかかる時間を指定します。

Internet Explorer 9 以前のバージョンは、transition 属性をサポートしていません。

Internet Explorer 10、Firefox、Opera、Chrome は、transition 属性をサポートしています。 Chrome 25 以前および Safari では、接頭辞 -webkit- が必要です。

アニメーション アニメーションを使用するには、まず

フレーム、つまりキーフレームの文法規則に慣れる必要があります。名前は「@keyframes」で始まり、その後に「アニメーションの名前」に 1 を加えたものになります。中括弧「{}」、括弧内にはさまざまな期間に対するスタイル ルールがいくつかあります。さまざまなキーフレームは、from (0% に相当)、to (100% に相当)、またはパーセンテージ (ブラウザーのサポートを最適化するために、パーセンテージを使用することをお勧めします) で表され、

@keyframes が定義されています。これが機能するには、アニメーションを通じてセレクターにバインドする必要があります。そうでない場合、アニメーションは効果がありません。アニメーションの属性は以下にリストされています:

Inplorer 10、Firefox、およびOpera は @Keyframes ルールとアニメーション プロパティをサポートしています

注: Internet Explorer 9 およびそれ以前のバージョンでは、@keyframe ルールまたはアニメーション属性をサポートしていません

上記のコンテンツは http://blog.csdn.net/ からのものです。 u014607184/article/details/51801393