HTML&CSS:3D卡片翻转悬停效果

这段HTML、CSS代码定义了页面的背景、卡片的3D翻转效果、内容的布局和样式,以及伪元素的视觉效果。通过这些样式,可以实现一个在鼠标悬停时翻转显示另一面内容的3D卡片。

演示效果

HTML&CSS

html 复制代码
<!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);:设置不同的渐变背景。
相关推荐
木木黄木木30 分钟前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!1 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷2 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript
还是鼠鼠2 小时前
Node.js全局生效的中间件
javascript·vscode·中间件·node.js·json·express
自动花钱机2 小时前
WebUI问题总结
前端·javascript·bootstrap·css3·html5
bst@微胖子2 小时前
Flutter项目之登录注册功能实现
开发语言·javascript·flutter
拉不动的猪2 小时前
简单回顾下pc端与mobile端的适配问题
前端·javascript·面试
拉不动的猪2 小时前
刷刷题49(react中几个常见的性能优化问题)
前端·react.js·面试
qp3 小时前
21.OpenCV获取图像轮廓信息
javascript·opencv·webpack
snowfoootball3 小时前
基于 Ollama DeepSeek、Dify RAG 和 Fay 框架的高考咨询 AI 交互系统项目方案
前端·人工智能·后端·python·深度学习·高考