CSS3で画像反転を実装する方法

今日は、CSS3 の知識を利用して画像反転機能を作成する方法を共有します。CSS3 での画像反転効果は、主にトランジション アニメーションと変形回転アニメーションを設定することで実現されます。

【おすすめコース: #CSS3 チュートリアル #】

##事例分析

画像反転効果のアイデア: まず、位置決めを使用して 2 つの画像を重ね合わせます。また、背面の画像を非表示にする必要もあります。その効果は、ページ上には画像が 1 つだけありますが、マウスがトリガーされると、後ろの画像が回転して前面に表示され、元から前面にあった画像が回転して背面に隠れます。

(1) Position: 位置決め

relative: 相対位置決め

absolute: 絶対位置決め

(2) backface-visibility: 回転した div を非表示にします要素の背面

visible: 背面が表示されます

hidden: 背面が非表示になります

(3) z-index 属性

要素を設定します重なり順は、設定した値が大きいほど上位になり、ページ内で前に表示されます

(4)transition-property: トランジション効果を必要とする CSS プロパティの名前を設定します

none: どの属性もトランジション効果を取得しません

all: すべてのプロパティがトランジション効果を取得します

property: トランジション効果を適用する CSS プロパティ名のリストを定義します。リストは次のとおりです。カンマで区切られた。

(5)transition-duration:トランジション効果が完了するまでにかかる秒数またはミリ秒

(6)transition-timing-function:トランジション効果が完了するまでの速度曲線

リニア: 均一速度

イーズ: 最初はゆっくり、次に速く、そしてまたゆっくり 低速で開始し、次に高速になり、その後低速で終了するトランジション エフェクトを指定します。 -ベジェ(0.25,0.1,0.25,1))。

cubic-bezier(n,n,n,n): cubic-bezier 関数で独自の値を定義します。可能な値は 0 から 1 までの値です。

(7) トランジション遅延: トランジション効果を遅らせるかどうか、およびいつ開始するか

(8) 変換属性: 要素は 2D または 3D 変換を適用します

例: rotateX( 180deg):

##完全なコードに沿って 180 度回転します:

このケースは Chrome ブラウザで実行されます

<br/>

レンダリング

ダイナミック効果

要約: 上記がこの記事の全内容です。この記事を共有することで、皆さんも絵の反転についてある程度理解していただければ幸いです。

以上がCSS3で画像反転を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。