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

【CSS】3D卡片效果

news 2026/2/9 14:48:47

效果

在这里插入图片描述

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？

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

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

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

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

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

eclipse版本与jdk版本对应关系

官网：Eclipse/Installation - Eclipsepedia eclipse历史版本（2007-）：Older Versions Of Eclipse - Eclipsepedia Eclipse Packaging Project (EPP) Releases | Eclipse Packages...

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

File类的学习

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

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

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

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

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

关于拓扑排序

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

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

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

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

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

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

要使用Python通过HTTP实现文件传输，可以使用Python的 requests 库来发送和接收HTTP请求。以下是一个示例代码，其中包括发送端和接收端的实现。发送端： 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（超详细）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JPA之Hibernate

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

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

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

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

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

git命令分类合集

配置 git config --global user.name <name>：设置全局用户名 git config --global user.email <email>：设置全局用户邮箱 git config --global core.editor <editor>：设置全局文本编辑器创建与克隆仓库 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

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器直接处理静态资源（HTML/CSS/图片等），响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器隐藏后端服务器IP地址，提高安全性 3.负载均衡服务器支持多种策略分发流量…...

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

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留，CCA-Attention为LLM长文本建模带来突破性进展琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制（CCA-Attention），…...

编程新知 2026/2/5 4:25:15

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章引言：语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进在人工智能领域，文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量，支撑着搜索引擎、推荐系统、…...

编程新知 2025/11/6 8:47:31

Android第十三次面试总结（四大组件基础）

Activity生命周期和四大启动模式详解一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成，用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机： onCreate() 调用时机：Activity 首次创建时调用。…...

编程新知 2025/10/15 15:07:34

AI病理诊断七剑下天山，医疗未来触手可及

一、病理诊断困局：刀尖上的医学艺术 1.1 金标准背后的隐痛病理诊断被誉为"诊断的诊断"，医生需通过显微镜观察组织切片，在细胞迷宫中捕捉癌变信号。某省病理质控报告显示，基层医院误诊率达12%-15%，专家会诊…...

编程新知 2026/2/6 20:53:34

JavaScript基础-API 和 Web API

在学习JavaScript的过程中，理解API（应用程序接口）和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能，使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

编程新知 2025/8/21 23:03:46

CRMEB 中 PHP 短信扩展开发：涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展扩展入口文件文件目录 crmeb\services\sms\Sms.php 默认驱动类型为：一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...

编程新知 2025/10/5 5:38:24

CVPR2025重磅突破：AnomalyAny框架实现单样本生成逼真异常数据，破解视觉检测瓶颈！

本文介绍了一种名为AnomalyAny的创新框架，该方法利用Stable Diffusion的强大生成能力，仅需单个正常样本和文本描述，即可生成逼真且多样化的异常样本，有效解决了视觉异常检测中异常样本稀缺的难题，为工业质检、医疗影像…...

编程新知 2026/2/5 4:18:48

十九、【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建

【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建前言准备工作第一部分：回顾 Django 内置的 `User` 模型第二部分：设计并创建 `Role` 和 `UserProfile` 模型第三部分：创建 Serializers第四部分：创建 ViewSets第五部分：注册 API 路由第六部分：后端初步测…...

编程新知 2026/1/9 3:08:54

OCR MLLM Evaluation

为什么需要评测体系？——背景与矛盾能干的事： 看清楚发票、身份证上的字（准确率>90%），速度飞快（眨眼间完成）。干不了的事： 碰到复杂表格（合并单元…...

编程新知 2025/10/6 15:50:41

效果

index.html

index.css

图片

cover1.jpg

hero1.png

title1.png

cover2.jpg

hero2.png

title2.png

相关文章：