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);:设置不同的渐变背景。
相关推荐
dualven_in_csdn1 小时前
搞了两天的win7批处理脚本问题
java·linux·前端
你的人类朋友2 小时前
✍️【Node.js程序员】的数据库【索引优化】指南
前端·javascript·后端
小超爱编程3 小时前
纯前端做图片压缩
开发语言·前端·javascript
应巅3 小时前
echarts 数据大屏(无UI设计 极简洁版)
前端·ui·echarts
Jimmy3 小时前
CSS 实现描边文字效果
前端·css·html
islandzzzz4 小时前
HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
Senar4 小时前
网页中如何判断用户是否处于闲置状态
前端·javascript
很甜的西瓜4 小时前
typescript软渲染实现类似canvas的2d矢量图形引擎
前端·javascript·typescript·图形渲染·canvas
Allen Bright4 小时前
【CSS-9】深入理解CSS字体图标:原理、优势与最佳实践
前端·css
软件开发技术深度爱好者4 小时前
HTML版英语学习系统
学习·html