HTML&CSS：快来试试！这个3D 翻转卡片超有趣这段代码创建了一个具有 3D 翻转效果的卡片，通过 CSS 技术实现

这段代码创建了一个具有 3D 翻转效果的卡片，通过 CSS 技术实现了卡片的翻转效果，为页面添加了视觉吸引力和用户交互体验

演示效果

HTML&CSS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注：前端Hardy</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #212121;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .container {
            width: 240px;
            height: 250px;
            perspective: 900px;
        }

        .card {
            height: 100%;
            width: 100%;
            background-color: aliceblue;
            position: relative;
            transition: transform 1500ms;
            transform-style: preserve-3d;
            border-radius: 2rem;
        }

        .container:hover>.card {
            cursor: pointer;
            transform: rotateY(180deg) rotateZ(180deg);
        }

        .front,
        .back {
            height: 100%;
            width: 100%;
            border-radius: 2rem;
            position: absolute;
            box-shadow: 0 0 10px 2px rgba(50, 50, 50, 2.5);
            backface-visibility: hidden;
            color: aliceblue;
            background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100%);
        }

        .front,
        .back {
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }

        .back {
            transform: rotateY(180deg) rotateZ(180deg);
        }

        .front-heading {
            font-size: 28px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            font-weight: bold;
            z-index: 999;
        }

        .front-content {
            font-size: 20px;
            z-index: 999;
        }

        .back-content {
            padding: 10px;
            font-size: 16px;
            text-align: left;
            text-indent: 2em;
        }

        .img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 2rem;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="card">
            <div class="front">
                <img class="img" src="./3D相册/img/p2.jpg" alt="">
                <p class="front-heading">2025</p>
                <p class="front-content">颜值不掉，钱包不倒</p>
            </div>
            <div class="back">
                <p class="back-content">祥光焕彩，瑞气盈庭，乙巳新岁已至。愿你心向暖阳，无畏风霜，目之所及皆为美好，心之所向皆能如愿。于时光长河中，静享岁月的诗意与温柔。</p>
            </div>
        </div>
    </div>

</body>

</html>

HTML 结构

container: 创建一个类名为container的div元素，用于包含卡片。
card: 创建一个类名为card的 div 元素，用于显示卡片内容。
front: 包含卡片的正面内容。
img: 显示一张图片。
front-heading: 显示卡片正面的标题。
front-content: 显示卡片正面的内容。
back: 包含卡片的背面内容。 -back-content: 显示卡片背面的内容。

CSS 样式

body: 设置页面的边距、填充、背景色、显示方式和高度。
.container: 设置卡片容器的样式，包括尺寸、3D 透视效果。
.card: 设置卡片的样式，包括尺寸、背景色、位置、过渡效果和 3D 效果。
.container:hover>.card: 设置鼠标悬停在卡片容器上时卡片的样式，使其翻转。
.front, .back: 设置卡片正面和背面的样式，包括尺寸、边框半径、位置、阴影、3D 效果和背景渐变。
.front, .back: 设置卡片正面和背面的显示方式、对齐和间隔。
.back: 设置卡片背面的初始 3D 旋转效果。
.front-heading: 设置卡片正面标题的样式，包括字体大小、字体家族、权重和层级。
.front-content: 设置卡片正面内容的样式，包括字体大小和层级。
.back-content: 设置卡片背面内容的样式，包括内边距、字体大小、对齐和缩进。
.img: 设置图片的样式，包括尺寸、位置和边框半径。