CSS反転効果の使い方（コード例）-フロントエンドQ&A-php.cn

CSS反転効果の使い方（コード例）

PHPz

リリース： 2023-04-23 17:42:07

オリジナル

2028 人が閲覧しました

Web デザインでは、フリップ効果は非常に一般的な効果であり、Web ページに 3 次元性とダイナミクスの感覚を追加できます。CSS フリップ効果コードは、この効果を非常に便利に実現できます。

CSS反転効果コードの使い方を紹介します。

transform アトリビュートを使用して反転効果を実現する

transform アトリビュートを使用すると、反転効果を実現する比較的簡単な方法です。複数の値を通じてさまざまな反転効果を設定できます。

たとえば、transform:rotateX(180deg) を設定すると、X 軸に沿って 180 度の反転を実現でき、transform:rotateY(180deg) を設定すると、180 度の反転を実現できます。 Y 軸に沿って。 CSS3 アニメーション機能がブラウザでサポートされている必要があることに注意してください。

CSS3 アニメーションを使用して反転効果を実現する

transform 属性の使用に加えて、CSS3 が提供するアニメーション機能を使用して反転効果を実現することもできます。その中で、アニメーション機能を使用すると、さまざまなフレームを使用してさまざまな効果を実現できます。アニメーションの時間、速度、その他のパラメーターを設定することで、さまざまな種類のダイナミックな反転効果を実現できます。

たとえば、次のコードを使用して左右の反転効果を実現できます:

.flip-container {
  perspective: 1000px;
  position: relative;
}
 
.flipper {
  position: absolute;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
 
.front, .back {
  position: absolute;
  top: 0;
  left: 0;
}
 
.front {
  z-index: 2;
  transform: rotateY(0deg);
}
 
.back {
  transform: rotateY(180deg);
}
 
.flip-container:hover .flipper {
  transform: rotateY(180deg);
}

ログイン後にコピー

CSS3 トランジションを使用して反転効果を実現します

# #CSS3 トランジション効果を使用して反転効果を実現することもできます。アニメーション機能とは異なり、トランジション効果は初期状態と終了状態を設定し、自動的に終了状態に遷移します。トランジション時間やエフェクトなどのパラメータを設定することで、さまざまなフリップ効果を実現できます。

たとえば、次のコードを使用して上下反転効果を実現できます:

.box {
  position:relative;
  width:160px;
  height:200px;
}
.box .front,
.box .back {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  -webkit-transition:all 0.5s ease-in-out;
          transition:all 0.5s ease-in-out;
}
.box .front {
  background:rgba(255, 192, 203, 0.8);
  z-index:2;
}
.box .back {
  -webkit-transform:rotateX(-180deg);
          transform:rotateX(-180deg);
  background:rgba(143, 188, 143, 0.8);
  z-index:1;
}
.box:hover .front {
  -webkit-transform:rotateX(180deg);
          transform:rotateX(180deg);
  z-index:1;
}
.box:hover .back {
  -webkit-transform:rotateX(0deg);
          transform:rotateX(0deg);
  z-index:2;
}

ログイン後にコピー

概要:

CSS 反転効果は、非常に実用的な Web デザイン効果です。 Web ページにさらに詳細な情報を追加することができ、より立体的でダイナミックな感覚が得られます。トランスフォーム属性、CSS3 アニメーション、およびトランジションのプロパティを使用すると、さまざまな種類の反転効果を簡単に実現でき、Web デザインの表現力と視覚効果を豊かにすることができます。

以上がCSS反転効果の使い方（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。