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);:设置不同的渐变背景。
相关推荐
一夜枫林几秒前
uniapp自定义拖拽排列
前端·javascript·uni-app
良艺呐^O^30 分钟前
uniapp实现app自动更新
开发语言·javascript·uni-app
IT瘾君2 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库2 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端3 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED3 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪3 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程3 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常4 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
烛阴4 小时前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express