HTML&CSS：惊爆！3D 翻转卡片，图片信息惊艳呈现

演示效果



HTML&CSS

1. <!DOCTYPE html>
   
2. <html lang="en">
   
3. 
   
4. <head>
   
5.     <meta charset="UTF-8">
   
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
7.     <title>公众号关注：前端Hardy</title>
   
8.     <style>
   
9.         body {
   
10.             margin: 0;
    
11.             padding: 0;
    
12.             background: #e8e8e8;
    
13.             display: flex;
    
14.             align-items: center;
    
15.             justify-content: center;
    
16.             height: 100vh;
    
17.         }
    
18.         section.card {
    
19.             position: relative;
    
20.             width: 350px;
    
21.             height: 200px;
    
22.             background-color: #474dc3;
    
23.             border-radius: 10px;
    
24.             display: flex;
    
25.             align-items: center;
    
26.             justify-content: center;
    
27.             overflow: hidden;
    
28.             perspective: 1000px;
    
29.             transition: all 0.8scubic-bezier(0.175, 0.885, 0.32, 1.275);
    
30.         }
    
31.         .cardsvg {
    
32.             fill: #333;
    
33.             transition: all 0.6scubic-bezier(0.175, 0.885, 0.32, 1.275);
    
34.             border-radius: 3px;
    
35.         }
    
36.         .card:hover {
    
37.             transform: scale(1.02);
    
38.             box-shadow: 08px16px#000000;
    
39.             background-color: #474dc3;
    
40.             color: #ffffff;
    
41.         }
    
42.         .card__content {
    
43.             position: absolute;
    
44.             top: 0;
    
45.             left: 0;
    
46.             width: 100%;
    
47.             height: 100%;
    
48.             padding: 20px;
    
49.             box-sizing: border-box;
    
50.             background-color: #474dc3;
    
51.             transform: rotateX(-90deg);
    
52.             transform-origin: bottom;
    
53.             transition: all 0.6scubic-bezier(0.175, 0.885, 0.32, 1.275);
    
54.         }
    
55.         .card:hover.card__content {
    
56.             transform: rotateX(0deg);
    
57.         }
    
58.         .card__title {
    
59.             margin: 0;
    
60.             padding-left: 5px;
    
61.             font-size: 24px;
    
62.             color: var(--white);
    
63.             font-weight: 700;
    
64.         }
    
65.         .cardimg {
    
66.             width: 100%;
    
67.             height: 100%;
    
68.             object-fit: cover;
    
69.         }
    
70.         .card:hoverimg {
    
71.             scale: 0;
    
72.         }
    
73.         .title {
    
74.             position: absolute;
    
75.             bottom: 0;
    
76.             left: 0;
    
77.             width: 100%;
    
78.             text-align: center;
    
79.             padding: 5px0;
    
80.             margin: 0;
    
81.             color: #000000;
    
82.             font-size: 18px;
    
83.             background: rgba(255, 255, 255, .6);
    
84.         }
    
85.         .card__description {
    
86.             margin: 20px00;
    
87.             font-size: 14px;
    
88.             color: #ffffff;
    
89.             line-height: 1.8;
    
90.             text-indent: 2rem;
    
91.         }
    
92.     </style>
    
93. </head>
    
94. <body>
    
95.     <section id="card1" class="card">
    
96.         <img src="./img/2.jfif" alt="">
    
97.         <p class="title">还记得詹韦连线吗？</p>
    
98.         <div class="card_content">
    
99.             <p class="card_title">詹姆斯与韦德的空中接力</p>
    
100.             <p class="card_description">
     
101.                 在NBA赛场上，詹姆斯与韦德的连线扣篮总是让人热血沸腾。
     
102.                 两位超级巨星的默契配合，让每一次空中接力都成为经典。
     
103.                 詹姆斯的精准传球与韦德的强力扣篮，展现了篮球运动的极致魅力。
     
104.             </p>
     
105.         </div>
     
106.     </section>
     
107. </body>
     
108. 
     
109. </html>

复制代码

CSS 样式

body: 设置页面的边距、填充、背景色、显示方式和高度。
section.card: 定义卡片的基本样式，包括尺寸、背景色、边框半径、显示方式和 3D 透视效果。
.card svg: 设置 SVG 元素的填充色和过渡效果。
.card:hover: 当鼠标悬停在卡片上时，卡片会放大并添加阴影效果。
.card_content: 设置卡片内容的定位、尺寸、填充、背景色和 3D 旋转效果。
.card:hover .card_content: 当鼠标悬停在卡片上时，卡片内容会旋转到正面。
.card_title: 设置卡片标题的样式。
.card img: 设置卡片中图片的尺寸和适应方式。
.card:hover img: 当鼠标悬停在卡片上时，图片会缩放至不可见。
.title: 设置标题的定位、文本对齐和样式。
.card_description: 设置卡片描述的样式。