当前位置：首页 > article >正文

HTMLCSS：3D卡片翻转悬停效果

article 2025/1/30 16:02:41

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

查看全文

http://www.kler.cn/a/441323.html