CSS3で変換グラデーション属性を使用する方法

translate 要素が現在の位置から要素を移動し、指定した座標に従って変位を実行することはわかっています。translate について詳しく説明し、誰もが理解できるように簡単なケースを作成してみましょう。

translate() は、指定された左 (x 座標) と上 (y 座標) に従って、要素を現在の位置から移動します。

translate(x,y) は 2 次元変換を定義します。 xy は数値です。 x は正です。右は負です。左 y 正 負の下向きと上向きの 3D 変換

scale() メソッドを定義します

translate3d(x,y,z)。指定された幅 (X 軸) と高さに従って、要素のサイズが増加または減少します。 (Y 軸) パラメータ

scale(x,y) は 2D 変換 x y を倍数として定義します

scale(2,4) は幅を元のサイズの 2 倍に、高さを元の高さの 4 倍に変換します

rotate( ) メソッドは、指定された角度で要素を時計回りに回転します。負の値が許可され、要素は反時計回りに回転します

rotate(30deg) は 30 度の回転を意味します

matrix() メソッド

skew(x-angle,y-angle) は 2D スキュー変換を定義します。 X 軸と Y 軸。

transition トランジションpropertytransition-property プロパティは、トランジション効果を適用する CSS プロパティの名前を指定します (例: width

transition-property: none|all|property;

transition-duration プロパティ)トランジション効果を完了するために必要な時間を指定します。所要時間 (秒またはミリ秒)。

transition-timing-function 属性は、トランジション効果の速度曲線を指定します。

transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-

bezier(n,n,n,n);ease: スロースタートを指定し、その後変化します

transition-lay 属性は、トランジション効果がいつ開始されるかを指定します。

例:

div
{width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}

これらの事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

CSS3のtranslate属性の詳細な紹介

CSS3のbackground-size属性の詳細な紹介

CSS3関数のrotate()の使い方

以上がCSS3で変換グラデーション属性を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。