
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 サイトの他の関連記事を参照してください。