这段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);：设置不同的渐变背景。
