css3反転効果-フロントエンドQ&A-php.cn

css3反転効果

王林

リリース： 2023-05-21 09:21:07

オリジナル

1472 人が閲覧しました

CSS3 反転効果は、Web デザインで一般的な効果です。Web 要素を前から後ろ、または後ろから前に反転して、3 次元効果を生み出し、ユーザーエクスペリエンスを向上させることができます。この記事ではCSS3の反転効果の実装方法と関連コードを詳しく紹介します。

1. CSS3 反転の基本

CSS3 の 3D 変形は、transform 属性によって実現されます。よく使用される 2 つの属性は、X 軸に沿って使用される、回転 X と回転 Y です。 Y軸。これら 2 つの属性を使用すると、次の例に示すように、要素の反転効果を簡単に実現できます。

.flip-box {
  perspective: 1000px;
}
.flip-box-inner { 
  position: relative; 
  width: 100%; 
  height: 100%; 
  transition: transform 0.6s; 
  transform-style: preserve-3d; 
}
.flip-box-front, .flip-box-back { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  backface-visibility: hidden; 
}
.flip-box-front { 
  background-color: #bbb; 
  color: black; 
}
.flip-box-back { 
  background-color: #2980b9; 
  color: white; 
  transform: rotateY(180deg); 
}
.flip-box:hover .flip-box-inner { 
  transform: rotateY(180deg); 
}

ログイン後にコピー

上記のコードは、単純な反転効果を実装し、上にマウスを置くと .flip-box-inner をトリガーします。 .flip-box 要素。要素の回転 Y 変換により、要素の反転効果が実現されます。 3 次元空間が正しく表示されるように、観察距離はパースペクティブ属性によって設定され、transform-style 属性は prepare-3d に設定されていることに注意してください。

2. CSS3 反転アニメーション

基本的な反転効果に加えて、CSS3 はアニメーションを通じてより鮮やかな効果を示すことができる、より多くの変形機能も提供します。一般的に使用される CSS3 フリップアニメーション実装コードの一部を以下に示します。

3D ボックスフリップアニメーション

.flip {
  transition: transform 0.5s;
  transform-style: preserve-3d;
}
.flip:hover {
  transform: rotate3d(0,1,0,180deg);
}

ログイン後にコピー

CSS3 のrotate3d 関数を使用すると、任意の軸に沿った回転の効果を実現できます。ここで 180deg は反転の度合いを表します。マウスを .flip 要素の上に置くと、アニメーション表示効果がトリガーされます。

3D 3 次元メニューフリップアニメーション

.flip-menu {
  perspective: 800px;
}
.flip-menu > li {
  position: relative;
  display: inline-block;
  margin: 0 10px;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}
.flip-menu > li > a {
  display: block;
  position: relative;
  color: #fff;
  text-decoration: none;
  background: #3498db;
  padding: 10px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.flip-menu > li:hover {
  transform: rotateY(-180deg);
}
.flip-menu > li > a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 0 100px rgba(0,0,0,0.2);
  transform: rotateY(180deg);
  transition: transform 0.5s;
}
.flip-menu > li:hover > a:before {
  transform: rotateY(0deg);
}

ログイン後にコピー

上記のコードは、3D 3 次元メニューフリップアニメーションを実装し、ホバーによってフリップメニューフリップ変換をトリガーします。同時に before 擬似要素を介してメニューの背面に表示効果を実装しました。

3. まとめ

CSS3 反転効果は Web デザインで広く使われている効果の一つで、transform 属性の変形機能と観察距離によりエッジに沿った効果を実現します。 3 次元空間 X 軸と Y 軸の反転効果。実際の開発では、CSS3 アニメーション属性と擬似要素を使用して、より鮮やかで 3 次元の効果を表示し、ユーザーに優れた視覚体験をもたらすことができます。

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