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

原创已于 2025-01-03 14:02:09 修改 · 639 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #3d #前端 #javascript

于 2025-01-02 14:45:16 首次发布

CSS 专栏收录该内容

198 篇文章

订阅专栏

这段代码创建了一个具有 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>公众号关注：前端Hardy</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #e8e8e8;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        section.card {
            position: relative;
            width: 350px;
            height: 200px;
            background-color: #474dc3;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            perspective: 1000px;
            transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .card svg {
            fill: #333;
            transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border-radius: 3px;
        }
        .card:hover {
            transform: scale(1.02);
            box-shadow: 0 8px 16px #000000;
            background-color: #474dc3;
            color: #ffffff;
        }
        .cardContent {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding: 20px;
            box-sizing: border-box;
            background-color: #474dc3;
            transform: rotateX(-90deg);
            transform-origin: bottom;
            transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .card:hover .cardContent {
            transform: rotateX(0deg);
        }
        .cardTitle {
            margin: 0;
            padding-left: 5px;
            font-size: 24px;
            color: var(--white);
            font-weight: 700;
        }
        .card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .card:hover img {
            scale: 0;
        }
        .title {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: center;
            padding: 5px 0;
            margin: 0;
            color: #000000;
            font-size: 18px;
            background: rgba(255, 255, 255, .6);
        }
        .cardDescription {
            margin: 20px 0 0;
            font-size: 14px;
            color: #ffffff;
            line-height: 1.8;
            text-indent: 2rem;
        }
    </style>
</head>
<body>
    <section id="card1" class="card">
        <img src="../Desktop/image.jpg" alt="">
        <p class="title">还记得詹韦连线吗？</p>
        <div class="cardContent">
            <p class="cardTitle">詹姆斯与韦德的空中接力</p>
            <p class="cardDescription">
                在NBA赛场上，詹姆斯与韦德的连线扣篮总是让人热血沸腾。
                两位超级巨星的默契配合，让每一次空中接力都成为经典。
                詹姆斯的精准传球与韦德的强力扣篮，展现了篮球运动的极致魅力。
            </p>
        </div>
    </section>
</body>
</html>