这段HTML、CSS代码定义了页面的背景、卡片的3D翻转效果、内容的布局和样式，以及伪元素的视觉效果。通过这些样式，可以实现一个在鼠标悬停时翻转显示另一面内容的3D卡片。
演示效果
HTML&CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-image: linear-gradient(to bottom right,
#91defe,
#99c0f9,
#bdb6ec,
#d7b3e3,
#efb3d5,
#f9bccc);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.flip {
box-shadow: 0 0 10px rgba(128, 128, 128, 0.5);
padding: 1em;
width: 190px;
height: 254px;
transform-style: preserve-3d;
transition: 3s ease;
}
.flip:hover {
transform: rotateY(180deg);
}
.flip .content {
transform-style: preserve-3d;
}
.flip .back,
.flip .front {
transform-style: preserve-3d;
backface-visibility: hidden;
display: flex;
flex-direction: column;
}
.flip .back {
transform: rotateY(180deg);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.flip h2,
.flip p {
transform: translateZ(90px);
text-shadow: 0 0 3px black;
text-align: center;
}
.flip h2 {
font-size: 3em;
color: #fff;
letter-spacing: 1px;
}
.flip p {
font-size: 1em;
color: #eee;
line-height: 1.6em;
}
.flip::before,
.flip::after {
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
background-image: linear-gradient(purple, red);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
transform: rotateY(180deg)translateZ(1px);
}
.flip::before {
transform: none;
background-image: linear-gradient(violet, orange);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="flip">
<div class="content">
<div class="front">
<h2>前面
</h2>
<p>我是正面</p>
</div>
<div class="back">
<h2>后面</h2>
<p>我是反面</p>
</div>
</div>
</div>
</body>
</html>
- .flip 类样式：box-shadow: 0 0 10px rgba(128, 128, 128, 0.5);：为元素添加一个半透明的灰色阴影。padding: 1em;：设置内边距为 1em。width: 190px; height: 254px;：设置元素的尺寸。transform-style: preserve-3d;：使元素的子元素能够在 3D 空间中呈现。transition: 3s ease;：当元素状态发生变化时，使用 3 秒的过渡效果，过渡方式为缓动。.flip:hover { transform: rotateY(180deg); }：当鼠标悬停在元素上时，元素沿 Y 轴旋转 180 度，实现翻转效果。
- .flip.content 类样式：transform-style: preserve-3d;：确保子元素能在 3D 空间中呈现。
- .flip.back,.flip.front 类样式：backface-visibility: hidden;：隐藏元素的背面，当元素旋转时，背面不会显示。display: flex; flex-direction: column;：将元素内部的内容以垂直方向的弹性布局排列。
- .flip.back 类样式：transform: rotateY(180deg);：将 .back 元素初始状态旋转 180 度，使其在元素的背面。position: absolute; top: 0; left: 0; right: 0; bottom: 0;：将 .back 元素定位在父元素的四个边界内。
- .flip h2,.flip p 样式：transform: translateZ(90px);：将元素沿 Z 轴平移 90px，以实现 3D 效果。text-shadow: 0 0 3px black;：为文本添加黑色的阴影。text-align: center：文本居中对齐.
- .flip::before,.flip::after 伪元素样式：content: “”;：添加一个空的内容，用于生成元素。position: absolute; top: 0; left: 0; right: 0; bottom: 0;：将伪元素定位在父元素的四个边界内。background-image: linear-gradient(purple, red);：为伪元素设置渐变背景。transform: rotateY(180deg)translateZ(1px);：对 .flip::after 元素进行 Y 轴旋转和 Z 轴平移。
- .flip::before 元素： transform: none;：不进行变换。 background-image: linear-gradient(violet, orange);：设置不同的渐变背景。