基于 HTML 和 CSS 实现的 3D 翻转卡片效果

一、引言

在网页设计中，为了增加用户的交互体验和视觉吸引力，常常会运用一些独特的效果。本文将详细介绍一个基于 HTML 和 CSS 实现的 3D 翻转卡片效果，通过对代码的剖析，让你了解如何创建一个具有立体感的卡片，在鼠标悬停时实现前后两面的翻转切换。

二、HTML 结构

这段代码的 HTML 部分相对简洁，主要构建了卡片的基本结构。最外层是一个div元素，类名为card-container，它作为卡片的容器，用于包裹卡片的正面和背面。

在card-container内部，有两个div元素，分别是类名为cover的正面和类名为back的背面。cover和back都包含了一些文本内容（这里是 "COVER" 和 "BACK"，实际展示中图片会覆盖这些文本），它们的作用是分别展示卡片的两个不同面。

三、CSS 样式解析

  1. 页面整体布局：body元素通过display: flex;、align-items: center;和justify-content: center;设置了弹性布局，使得页面内容在垂直和水平方向上都居中显示，并且height: 100vh;确保了body占据整个视口的高度。
  2. 卡片容器样式：card-container类定义了卡片容器的样式。width: 300px;和height: 400px;设置了容器的宽度和高度。position: relative;使其成为相对定位元素，为内部的绝对定位元素提供参考。perspective: 1000px;属性为容器设置了透视效果，这是实现 3D 效果的关键，它决定了元素在 3D 空间中的深度感，数值越大，元素看起来越远，3D 效果越不明显；数值越小，3D 效果越强烈。
  3. 卡片正面和背面样式：
    • cover和back类都设置了width: 100%;和height: 100%;，使其填满整个卡片容器。position: absolute;将它们设置为绝对定位，以便在容器内自由放置。backface-visibility: hidden;是一个重要的属性，它确保当元素翻转时，背面不会显示出来，从而实现真正的翻转效果。transition: transform 0.5s ease-in-out;定义了元素在变换（这里是翻转）时的过渡效果，持续时间为 0.5 秒，过渡效果为ease-in-out，即开始和结束时缓慢，中间过程较快。
    • cover类通过background-image: url("./assets/movie-poster/m-byxz.jpg");设置了背景图片，background-size: cover;使背景图片完全覆盖元素，并且保持图片的纵横比。初始状态下，transform: rotateY(0deg);表示元素在 Y 轴上旋转 0 度，即正面朝向用户。
    • back类同样通过background-image: url("./assets/movie-poster/m-dbs.jpg");和background-size: cover;设置背景图片。transform: rotateY(180deg);表示元素在 Y 轴上旋转 180 度，即背面朝向用户。
  4. 鼠标悬停效果：通过:hover伪类来实现鼠标悬停时的效果。当鼠标悬停在card-container上时，card-container:hover .cover规则使cover元素在 Y 轴上旋转 180 度，从而展示背面；card-container:hover .back规则使back元素在 Y 轴上旋转 0 度，展示正面，这样就实现了卡片的翻转效果。

完整代码展示 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="./assets/global.css" /><style>body {display: flex;align-items: center;justify-content: center;height: 100vh;}.card-container {width: 300px;height: 400px;position: relative;perspective: 1000px;}.cover,.back {width: 100%;height: 100%;position: absolute;backface-visibility: hidden;transition: transform 0.5s ease-in-out;}.cover {background-image: url("./assets/movie-poster/m-byxz.jpg");background-size: cover;transform: rotateY(0deg);}.back {background-size: cover;background-image: url("./assets/movie-poster/m-dbs.jpg");transform: rotateY(180deg);}.card-container:hover .cover {transform: rotateY(180deg);}.card-container:hover .back {transform: rotateY(0deg);}</style>
</head><body><div class="card-container"><div class="cover">COVER</div><div class="back">BACK</div></div>
</body></html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/79765.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

C++ 中二级指针的正确释放方法

C++ 中二级指针的正确释放方法

C 中二级指针的正确释放 一、什么是二级指针&#xff1f; 简单说&#xff0c;二级指针就是指向指针的指针。 即&#xff1a; int** p;它可以指向一个 int*&#xff0c;而 int* 又指向一个 int 类型的变量。 常见应用场景 动态二维数组&#xff08;例如 int** matrix&#x…
阅读更多...
大数据平台与数据仓库的核心差异是什么？

大数据平台与数据仓库的核心差异是什么？

随着数据量呈指数级增长&#xff0c;企业面临着如何有效管理、存储和分析这些数据的挑战。 大数据平台和 数据仓库作为两种主流的数据管理工具&#xff0c;常常让企业在选型时感到困惑&#xff0c;它们之间的界限似乎越来越模糊&#xff0c;功能也有所重叠。本文旨在厘清这两种…
阅读更多...
Winform（11.案例讲解1）

Winform（11.案例讲解1）

今天写两个案例，用于更好的理解控件的使用 在写之前先写一个类 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace _1.案例讲解 { internal class Student { public string …
阅读更多...
Spring AMQP源码解析

Spring AMQP源码解析

目录 channel和connection的区别 自动装配RabbitAutoConfiguration 消息发送流程 获取connection对象 获取channel对象 AMQConnection读取frame帧并回调publishconfirm和publishreturn MainLoop线程监听 执行回调 channel和connection的区别 Spring AMQP 是 Spring 框…
阅读更多...
Linux系统安装PaddleDetection

Linux系统安装PaddleDetection

一、安装cuda 1. 查看设备 先输入nvidia-smi&#xff0c;查看设备支持的最大cuda版本&#xff0c;选择官网中支持的cuda版本 https://www.paddlepaddle.org.cn/install/quick?docurl/documentation/docs/zh/install/conda/linux-conda.html 2. 下载CUDA并安装 使用快捷键…
阅读更多...
Linux系统中的时间同步服务

Linux系统中的时间同步服务

1.时间同步&#xff1a;多主机协作工作&#xff0c;时间应该保持一致&#xff0c;如加密协议、日志、集群等&#xff0c;利用NTP&#xff08;Network Time Protocol&#xff09;协议使得各个主机时间达到同步。 ntp:将系统时钟和世界协调时UTC同步&#xff0c;精度在局域网内可…
阅读更多...
【Linux笔记】系统的延迟任务、定时任务极其相关命令（at、crontab极其黑白名单等）

【Linux笔记】系统的延迟任务、定时任务极其相关命令（at、crontab极其黑白名单等）

一、延时任务 1、概念 延时任务&#xff08;Delayed Jobs&#xff09;通常指在指定时间或特定条件满足后执行的任务。常见的实现方式包括 at 和 batch 命令&#xff0c;以及结合 cron 的调度功能。 2、命令 延时任务的命令最常用的是at命令&#xff0c;第二大节会详细介绍。…
阅读更多...
软考 系统架构设计师系列知识点 —— 黑盒测试与白盒测试（1）

软考 系统架构设计师系列知识点 —— 黑盒测试与白盒测试（1）

本文内容参考&#xff1a; 黑盒测试和白盒测试详解-CSDN博客 软件测试中的各种覆盖&#xff08;Coverage&#xff09;详解-CSDN博客 特此致谢&#xff01; 零、概述 黑盒测试又名为功能测试&#xff0c;主要目的是发现软件设计的需求或者是软件设计规格说明书中的错误缺陷。…
阅读更多...
yolov11 epoch100轮 训练笔记5 kaggle comet

yolov11 epoch100轮 训练笔记5 kaggle comet

Football Players Detection using YOLOV11 | Kaggle !pip install comet_ml import comet_mlcomet_ml.login(project_name"c") Comet - Build Better Models Faster yolov11训练 100轮一眨眼训练完了 然而comet接不到yolo的sdk 优秀 训练17轮map就0.99了 v5训练100…
阅读更多...
Ubuntu K8S(1.28.2) 节点/etc/kubernetes/manifests 不存在

Ubuntu K8S(1.28.2) 节点/etc/kubernetes/manifests 不存在

Ubuntu K8S(1.28.2) 节点/etc/kubernetes/manifests 不存在 在查看日志&#xff08;journalctl -xefu kubelet&#xff09;时发现各节点/etc/kubernetes/manifests 不存在&#xff0c;但主节点没有异常 21080 file.go:104] "Unable to read config path" err"…
阅读更多...
neo4j基础操作：命令行增删改查

neo4j基础操作：命令行增删改查

目录 一&#xff0c;Neo4j的增 1.1.新增节点 1.2.新增关系 1.2.1创建节点时&#xff0c;创建关系 1.2.2在已有的节点上&#xff0c;创建关系 二&#xff0c;Neo4j的删除 2.1删除节点 2.1.1无关系的节点删除 2.1.2 有关系的节点删除 三&#xff0c;节点修改 3.1 给节点…
阅读更多...
rollout 是什么：机器学习（强化学习）领域

rollout 是什么：机器学习（强化学习）领域

rollout 是什么：机器学习（强化学习）领域 指从特定初始状态开始，按照某个策略或模型进行一系列动作和状态转移，直到达到终止状态或预定时间步数 。比如： 迷宫任务：强化学习代理在迷宫中，从起始点出发，按某策略（如随机选方向走）进行移动，直到找到出口或达到最大移动…
阅读更多...
stm32之TIM定时中断详解

stm32之TIM定时中断详解

目录 1.引入1.1 简介1.2 类型1.2.1 基本定时器1.2.2 通用定时器1. 触发控制单元 (Trigger Control Unit)2. 输入捕获单元 (Input Capture Unit)3. 输出比较单元 (Output Compare Unit)4. CNT 计数器5. 自动重装载寄存器 (ARR)6. 预分频器 (PSC)7. 中断与 DMA 事件8. 刹车功能 (…
阅读更多...
centos8源码安装openssl

centos8源码安装openssl

前言&#xff1a; 在使用python3.11部署运行FastAPI时&#xff0c;由于其uvicorn需要使用openssl模块&#xff0c;导致没有安装openssl的服务器项目运行不起来. 【第一步】 我的网盘下载openssl-1.1.1n.tar.gz 提取码: vay9 【第二步】 上传到服务器解压 tar -zxvf opens…
阅读更多...
vue3 动态修改系统title

vue3 动态修改系统title

vue3 动态修改系统title 修改前 修改后 1、封装 useTitle 工具函数 创建组合式 API&#xff0c;通过 watchEffect 监听标题变化&#xff1a; // composables/useTitle.js import { ref, watchEffect } from vue;export function useTitle(initialTitle) {const title r…
阅读更多...
比较两种判断相同二叉树的方法：递归与遍历序列对比

比较两种判断相同二叉树的方法：递归与遍历序列对比

在二叉树操作中&#xff0c;判断两棵树是否相同是一个常见的问题。本文将对比两种不同的解决方案&#xff1a;递归法和遍历序列对比法&#xff0c;分析它们的优缺点&#xff0c;并探讨为何递归法是更优的选择。 问题描述 给定两棵二叉树的根节点 p 和 q&#xff0c;判断它们是…
阅读更多...
从0开始学习大模型--Day01--大模型是什么

从0开始学习大模型--Day01--大模型是什么

初识大模型 在平时遇到问题时&#xff0c;我们总是习惯性地去运用各种搜索引擎如百度、知乎、CSDN等平台去搜索答案&#xff0c;但由于搜索到的内容质量参差不齐&#xff0c;检索到的内容只是单纯地根据关键字给出内容&#xff0c;往往看了几个网页都找不到答案&#xff1b;而…
阅读更多...
【AI大模型】SpringBoot整合Spring AI 核心组件使用详解

【AI大模型】SpringBoot整合Spring AI 核心组件使用详解

目录 一、前言 二、Spring AI介绍 2.1 Spring AI介绍 2.2 Spring AI主要特点 2.3 Spring AI核心组件 2.4 Spring AI应用场景 2.5 Spring AI优势 2.5.1 与 Spring 生态无缝集成 2.5.2 模块化设计 2.5.3 简化 AI 集成 2.5.4 支持云原生和分布式计算 2.5.5 安全性保障…
阅读更多...
洛谷 P9007 [入门赛 #9] 最澄澈的空与海 (Hard Version)

洛谷 P9007 [入门赛 #9] 最澄澈的空与海 (Hard Version)

这道题可不入门。 [Problem Discription] \color{blue}{\texttt{[Problem Discription]}} [Problem Discription] 给定 n n n&#xff0c;求有多少组 ( x , y , z ) (x,y,z) (x,y,z) 满足&#xff1a; x − y z n ! x-\dfrac{y}{z}n! x−zy​n! x − y z n ! n \dfrac{x-y…
阅读更多...
PostgreSQL 的 pg_stat_file 函数

PostgreSQL 的 pg_stat_file 函数

PostgreSQL 的 pg_stat_file 函数 pg_stat_file 是 PostgreSQL 提供的一个系统管理函数&#xff0c;用于获取文件系统上文件的元数据信息。这个函数对于数据库管理员进行文件级别的监控和诊断非常有用。 一 函数基本语法 pg_stat_file(filename text [, missing_ok boolean …
阅读更多...
最新文章

Copyright @ 2022~2023