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

【CSS】3D卡片效果

news 2026/2/8 22:36:42

效果

在这里插入图片描述

index.html

<!DOCTYPE html>
<html><head><title> Document </title><link type="text/css" rel="styleSheet" href="index.css" /></head><body><div class="card"><img src="cover1.jpg" class="cover" /><img src="title1.png" class="title" /><img src="hero1.png" class="hero" /></div><div class="card"><img src="cover2.jpg" class="cover" /><img src="title2.png" class="title" /><img src="hero2.png" class="hero" /></div></body>
</html>

index.css

* {margin: 0;padding: 0;box-sizing: border-box;
}
body{width: 100vw;height: 100vh;margin: 0;/* 弹性盒 */display: flex;/* 水平居中 */justify-content:  center;/* 垂直居中 */align-items: center;/* backgroud: #191c29 */background: #fff;
}
.card{width: 200px;height: 300px;/* 设置card元素的边距 */margin: 0px 50px;/* 设置card元素在Y方向偏移-50% */transform: translateY(-50%);/* 设置定位类型为相对定位 */position: relative;
}.card img{/* img元素在card元素中为绝对定位 */position: absolute;width: 100%;left: 0;/* 设置元素状态转换过度时间，消除转化过程中的卡顿感 */transition: 0.5s;
}
.card:hover .cover{/* perspective(500px) 设置平面和用户眼睛之间的距离*//* rotateX(25deg) 鼠标移入card元素时将其中的cover元素绕x轴旋转25°*/transform: perspective(500px) rotateX(25deg);/* 设置一个下拉阴影，并设置阴影的颜色*/box-shadow: 0 35px 0px 10px rgba(0, 0, 0,0.7);
}.cover {height: 100%;/* 将cover元素设置在第一层*/z-index: 1;
}.hero {height: 100%;/* 将cover元素设置在第二层*/z-index: 2;opacity: 0;}
.card:hover .hero{opacity: 1;/* perspective(500px) 设置平面和用户眼睛之间的距离*//* translate3d 设置hero元素的xyz值*/transform: perspective(500px) translate3d(0,-25px,100px);
}
.title {/* 将cover元素设置在第3层*/
z-index: 3;
bottom: 0;}
.card:hover .title{/* perspective(500px) 设置平面和用户眼睛之间的距离*//* translate3d 设置hero元素的xyz值*/transform: perspective(500px) translate3d(0,-25px,50px);
}

图片

cover1.jpg

在这里插入图片描述

hero1.png

在这里插入图片描述

title1.png

THE DARK RIDER CHRIS MASON
在这里插入图片描述

cover2.jpg

在这里插入图片描述

hero2.png

在这里插入图片描述

title2.png

ZAQ CASS FORCE MAGE
在这里插入图片描述

相关文章：

【CSS】3D卡片效果

效果 index.html <!DOCTYPE html> <html><head><title> Document </title><link type"text/css" rel"styleSheet" href"index.css" /></head><body><div class"card"><img…...

编程日记 2023/8/3 5:23:20

OrderApplication

目录 1 OrderApplication 2 /// 查询订单 2.1.1 //补充商品单位 2.1.2 //补充门店名称 2.1.3 //补充门店名称 2.1.4 //订单售后 2.1.5 //订单项售后 OrderApplication...

编程日记 2023/8/3 5:22:18

如何在保健品行业运用IPD？

保健品是指能调节机体功能&#xff0c;不以治疗为目的&#xff0c;并且对人体不产生任何急性、亚急性或者慢性危害的产品。保健品是食品的一个种类&#xff0c;具有一般食品的共性&#xff0c;其含有一定量的功效成分&#xff0c;能调节人体的机能&#xff0c;具有特定的功效&a…...

编程日记 2023/8/3 5:21:17

Flink系列之：动态发现新增分区

Flink系列之&#xff1a;动态发现新增分区 一、动态发现新增分区二、Flink SQL动态发现新增分区三、Flink API动态发现新增分区 为了在不重新启动 Flink 作业的情况下处理主题扩展或主题创建等场景&#xff0c;可以将 Kafka 源配置为在提供的主题分区订阅模式下定期发现新分区。…...

编程日记 2023/8/3 5:20:15

eclipse版本与jdk版本对应关系

官网&#xff1a;Eclipse/Installation - Eclipsepedia eclipse历史版本&#xff08;2007-&#xff09;&#xff1a;Older Versions Of Eclipse - Eclipsepedia Eclipse Packaging Project (EPP) Releases | Eclipse Packages...

编程日记 2023/8/3 5:19:14

File类的学习

java.io.File类 文件和目录路径的抽象表达形式是一个与操作系统无关的类&#xff0c;任何一个操作系统都可以使用这个类中的方法 File.pathSeparator 文件路径分隔符&#xff0c;windows是分号&#xff0c;linux是&#xff1a; File.separator 文件名分隔符&#xff0c;window…...

编程日记 2023/8/3 5:18:11

Linux 操作系统 Red Hat Enterprise Linux 安装教程

文章目录 笔者的操作环境&#xff1a; 制作环境&#xff1a; Win32 Disk Imager 1.0.0 Windows 10 教育版 ISO&#xff1a; Red Hat Enterprise Linux 9.2 x86_64 Red Hat Enterprise Linux&#xff08;RHEL&#xff09;是一种 Linux 操作系统。安装此操作系统的难题在于&a…...

编程日记 2023/8/3 5:17:09

关于拓扑排序

又重新学了一下拓扑排序&#xff0c;这次发现就十分简单了&#xff0c;拓扑排序的步骤 1.他必须是一个有向无环图&#xff0c;起点我们就是入度为0的点 2.我们首先要输出的就是入度为0的点&#xff0c;然后依次删除这些点连向的点&#xff0c;使这些点的入度-1&#xff0c;如果…...

编程日记 2023/8/3 5:16:07

【C++】开源：Boost库常用组件配置使用

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍Boost库常用组件配置使用。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0c…...

编程日记 2023/8/3 5:15:06

用python通过http实现文件传输，分为发送端和接收端

要使用Python通过HTTP实现文件传输&#xff0c;可以使用Python的 requests 库来发送和接收HTTP请求。以下是一个示例代码&#xff0c;其中包括发送端和接收端的实现。 发送端&#xff1a; import requestsdef send_file(file_path, url):with open(file_path, rb) as file:re…...

编程日记 2023/8/3 5:14:04

数据结构--图的遍历 DFS

数据结构–图的遍历 DFS 树的深度优先遍历 //树的先根遍历 void PreOrder(TreeNode *R) {if(R ! NULL){visit(R); //访问根节点while(R还有下一个子树T)PreOrder(T);//先根遍历下一棵子树} }图的深度优先遍历 bool visited [MAX_VERTEX_NUM]; //访问标记数组 void DFS(Grap…...

编程日记 2023/8/3 5:13:02

SpringBoot集成MyBatisPlus+MySQL（超详细）

前言 查看此文章前强烈建议先看这篇文章&#xff1a;Java江湖路 | 专栏目录 该文章纪录的是SpringBoot快速集成MyBatis Plus&#xff0c;每一步都有记录&#xff0c;争取每一位看该文章的小伙伴都能操作成功。达到自己想要的效果~ 文章目录 前言1、什么是MyBatisPlus2、Spring…...

编程日记 2023/8/3 5:12:01

一边是计算机就业哀鸿遍野，一边是高考生疯狂涌向计算机专业

在张雪峰推荐的几大专业里&#xff0c;计算机专业是其中之一。近几年&#xff0c;计算机专业报考热度不减&#xff0c;但就业前景却令人堪忧&#xff0c;互联网裁员接二连三&#xff0c;许多码农找不到工作。 一位网友感叹&#xff1a;一边是计算机就业哀鸿遍野&#xff0c;一…...

编程日记 2023/8/3 5:10:59

解决外部主机无法访问Docker容器的方法

使用Docker启动了一个tomcat容器&#xff0c;并做了端口映射&#xff0c;但是外部主机仍然无法访问。 编辑centos上的配置文件 vi /etc/sysctl.conf net.ipv4.ip_forward1 systemctl restart network保存以后即可生效&#xff0c;这个配置是开启linux的ip数据包转发功能&#…...

编程日记 2023/8/3 5:09:58

IDEA中修改类头的文档注释信息

IDEA中修改类头的文档注释信息 选择File--Settings--Editor--File and Code Templates--Includes&#xff0c;可以把文档注释写成这种的 /**author: Arbicoralcreate: ${YEAR}-${MONTH}-${DAY} ${TIME}Description: */这样回看就可以很清楚的看到自己创建脚本的时间&#xff…...

编程日记 2023/8/3 5:08:57

建模教程：如何利用3ds Max 和 After Effects 实现多通道渲染和后期合成

推荐&#xff1a; NSDT场景编辑器 助你快速搭建可二次开发的3D应用场景 1. 创建基本场景 步骤 1 打开 3ds Max。 打开 3ds Max。 步骤 2 我做了一个简单的场景。我放了三个 彼此之间有一定距离的物体。 制作对象 步骤 3 按 Ctrl-C 键 在透视视图中创建摄影机。 创建相机 …...

编程日记 2023/8/3 5:07:51

JPA之Hibernate

JPA 定义&#xff1a;是 JavaEE 中一组用于持久化数据的 API&#xff0c;它提供了一种标准的 ORM 规范&#xff0c;用于 Java 对象映射到数据库中。 JPA 的开发是为了简化企业级应用程序的开发&#xff0c;降低应用程序与数据库之间的耦合度&#xff0c;并提高应用程序的可维护…...

编程日记 2023/8/3 5:06:50

leetcode(力扣)剑指 Offer 16. 数值的整数次方 (快速幂)

文章目录 题目描述思路分析完整代码 题目描述 实现 pow(x, n) &#xff0c;即计算 x 的 n 次幂函数&#xff08;即&#xff0c;xn&#xff09;。不得使用库函数&#xff0c;同时不需要考虑大数问题。 示例 1&#xff1a; 输入&#xff1a;x 2.00000, n 10 输出&#xff1a;10…...

编程日记 2023/8/3 5:05:48

git命令分类合集

配置 git config --global user.name <name>&#xff1a;设置全局用户名 git config --global user.email <email>&#xff1a;设置全局用户邮箱 git config --global core.editor <editor>&#xff1a;设置全局文本编辑器创建与克隆仓库 git init&#xf…...

编程日记 2023/8/3 5:04:47

微信小程序打开地图的方法

1、打开内置地图 wx.openLocation({latitude: 31.230416, // 上海的纬度longitude: 121.473701, // 上海的经度name: 上海市, // 地点名称address: 中国上海市黄浦区人民广场, // 地址的详细说明scale: 18, // 缩放比例success: function(res) {console.log(打开地图成功);},f…...

编程日记 2023/8/3 5:03:43

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

编程新知 2026/2/8 20:41:56

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2026/2/8 20:41:49

Python爬虫实战：研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。 然而，互联网…...

编程新知 2025/8/18 9:54:31

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

编程新知 2026/2/4 15:29:40

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

编程新知 2026/2/1 5:42:50

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2026/1/31 23:25:09

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

编程新知 2025/12/5 3:38:11

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

编程新知 2026/1/20 12:53:30

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

编程新知 2026/1/19 2:13:24

Redis：现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...

编程新知 2025/11/15 1:41:43