ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS のみを使用して 3D カードの反転効果を実現するにはどうすればよいですか?

CSS のみを使用して 3D カードの反転効果を実現するにはどうすればよいですか?

Mary-Kate Olsen
リリース: 2024-10-23 18:37:31
オリジナル
431 人が閲覧しました

How to Achieve a 3D Card Flipping Effect Using Only CSS?

CSS を使用して 3D カードを反転する方法

このタスクは、CSS のみを使用して、カードが反転する 3D カード反転エフェクトを作成することです。

CSS のみの反転効果

実装を簡素化するために、次の CSS コードを使用します:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<code class="css">.card {

  position: relative;

  width: 50vh;

  height: 80vh;

  perspective: 500px;

  margin: 10vh auto 50vh;

}

 

.front,

.back {

  position: absolute;

  width: 100%;

  height: 100%;

  transition: transform 1s;

  backface-visibility: hidden;

  transform-style: preserve-3d;

}

 

.front {

  background-color: #66ccff;

}

 

.back {

  background-color: #dd8800;

  transform: rotateY(180deg);

}

 

.card:hover .front {

  transform: rotateY(180deg);

}

 

.card:hover .back {

  transform: rotateY(360deg);

}</code>

ログイン後にコピー

説明

カード コンテナには遠近法が適用され、3D 空間のような錯覚を与えます。前面と背面の両方がコンテナ内に絶対的に配置されます。また、背面を非表示にして 3D 性質を維持するために変形されます。

カードの上にマウスを置くと、次の変形が発生します:

  • 前面が 180 度回転します。 Y 軸を回転させ、背面を表示します。
  • 背面が Y 軸を中心に 360 度回転し、反転が完了します。

この CSS のみのテクニックにより、スムーズでリアルな表現が可能になります。ホバー時の 3D カード反転効果。

以上がCSS のみを使用して 3D カードの反転効果を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート