【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 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
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Spring:IOC技术、Bean、DI

前言 Spring是一个开源的项目&#xff0c;并不是单单的一个技术&#xff0c;发展至今已形成一种开发生态圈。也就是说我们可以完全使用Spring技术完成整个项目的构建、设计与开发。Spring是一个基于IOC和AOP的架构多层j2ee系统的架构。 SpringFramework&#xff1a;Spring框架…

Jenkins Gerrit Trigger实践

1.创建Gerrit Trigger 2.jenkins master节点生成gerrit用户的密钥 这里的用户名得写登录gerrit后个人信息中的 Username 3.gerrit 配置刚刚jenkins生成密钥的公钥 4.gerrit 用户加入群组 不加这个群组&#xff0c;下一步测试就会报错“User aeshare has no capability conn…

TCP连接的状态详解以及故障排查(五)

同时打开 两个应用程序同时执行主动打开的情况是可能的&#xff0c;虽然发生的可能性较低。每一端都发送一个SYN,并传递给对方&#xff0c;且每一端都使用对端所知的端口作为本地端口。例如&#xff1a; 主机a中一应用程序使用7777作为本地端口&#xff0c;并连接到主机b 888…

UG\NX二次开发 属性值连接到表达式

文章作者:里海 来源网站:https://blog.csdn.net/WangPaiFeiXingYuan 简介: 利用表达式参数驱动模型形状实现参数化建模,同时将表达式关联到部件属性中,实现自动更新属性值。这将为建模过程带来更大的灵活性和可扩展性。通过将属性值连接到表达式,可以动态地…

安全测试国家标准解读——函数调用安全、异常处理安全、指针安全

下面的系列文章主要围绕《GB/T 38674—2020 信息安全技术 应用软件安全编程指南》进行讲解&#xff0c;该标准是2020年4月28日&#xff0c;由国家市场监督管理总局、国家标准化管理委员会发布&#xff0c;2020年11月01日开始实施。我们对该标准中一些常见的漏洞进行了梳理&…

Git分布式版本控制工具和GitHub(一)--简介

一.Git概述 1.Git简介 【1】什么是Git? Git就是代码版本管理工具。 【2】为什么要使用Git &#xff08;1&#xff09;版本控制 写代码就是不断写BUG的过程&#xff08;当然我们是不会这么说的&#xff09;&#xff0c;很多时候你写了100行代码之后&#xff0c;突然醒悟&…

安卓音视频多对多级联转发渲染

最近利用自己以前学习和用到的音视频知识和工程技能做了一个android的sdk,实现了本地流媒体ipc rtsp 拉流以及自带mip usb等camera audio节点产生的流媒体通过webrtc sfu的方式进行多对多级联发布共享,网状结构&#xff0c;p2p组网&#xff0c;支持实时渲染以及转推rtmp&#x…

bean作用域和生命周期

Bean 默认情况下是单例状态&#xff08;singleton&#xff09;&#xff0c;也就是所有⼈的使⽤的都是同⼀个对象&#xff0c;之前我们学单例模式的时候都知道&#xff0c;使⽤单例可以很⼤程度上提⾼性能&#xff0c;所以在 Spring 中 Bean 的作⽤域默认也是 singleton 单例模式…

企业电子招标采购系统源码Spring Boot + Mybatis + Redis + Layui + 前后端分离 构建企业电子招采平台之立项流程图 tbms

&#xfeff; 项目说明 随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大&#xff0c;公司对内部招采管理的提升提出了更高的要求。在企业里建立一个公平、公开、公正的采购环境&#xff0c;最大限度控制采购成本至关重要。符合国家电子招投标法律法规及相关规范&am…

批量计算直角三角形两个直角边对应斜边的numpy.hypot()方法

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 给出多个三角形的两条直角边长度 批量计算出这些三角形的斜边长度 numpy.hypot() [太阳]选择题 以下代码的输出结果是? import numpy as np a np.array([3, 4, 30]) b np.array([4, 3, 40])…

HDFS中数据迁移的使用场景和考量因素

HDFS中数据迁移的使用场景和考量因素 数据迁移使用场景数据迁移要素考量HDFS分布式拷贝工具-DistCpdistcp的优势性能命令 数据迁移使用场景 冷热集群数据同步、分类存储集群数据整体搬迁 当公司业务迅速的发展&#xff0c;导致的当前的服务器数量资源出现临时紧张的时候&#…

解密外接显卡:笔记本能否接外置显卡?如何连接外接显卡?

伴随着电脑游戏和图形处理的需求不断增加&#xff0c;很多笔记本电脑使用者开始考虑是否能够通过外接显卡来提升性能。然而&#xff0c;外接显卡对于笔记本电脑是否可行&#xff0c;以及如何连接外接显卡&#xff0c;对于很多人来说仍然是一个迷。本文将为您揭秘外接显卡的奥秘…

二重积分1

目录 二重积分 二重积分的性质 ​编辑 中值定理 二重积分的计算 方法1&#xff1a;利用直角坐标计算 方法2&#xff1a;利用极坐标进行计算 适用于极坐标的二重积分的特征 对称性和奇偶性的应用 题目 例题1&#xff1a; 题目2&#xff1a; 题目3&#xff1a; 题目4&#x…

0基础学习VR全景平台篇 第76篇:全景相机-圆周率全景相机如何直播推流

圆周率科技&#xff0c;成立于2012年&#xff0c;是中国最早投身嵌入式全景算法研发的团队之一&#xff0c;亦是全球市场占有率最大的全景算法供应商。相继推出一体化智能屏、支持一键高清全景直播的智慧全景相机--Pilot Era和Pilot One&#xff0c;为用户带来实时畅享8K的高清…

在Volo.Abp微服务中使用SignalR

假设需要通过SignalR发送消息通知&#xff0c;并在前端接收消息通知的功能 创建SignalR服务 在项目中引用 abp add-package Volo.Abp.AspNetCore.SignalR在Module文件中添加对模块依赖 [DependsOn(...typeof(AbpAspNetCoreSignalRModule))] public class IdentityApplicati…

【Spring】学习Spring需要掌握的核心设计思想

目录 一、Spring是什么 二、什么是IoC容器 1、什么是容器 2、什么是IoC 3、Spring IoC 4、DI&#xff08;依赖注入&#xff09; 4.1、IoC和DI的区别 5、 DL&#xff08;依赖查找&#xff09; 一、Spring是什么 我们通常所说的Spring指的是Spring Framework&#xff08;…

Vue3徽标数(Badge)

APIs 参数说明类型默认值必传color自定义小圆点的颜色string‘’falsecount展示的数字&#xff0c;大于 overflowCount 时显示为 overflowCount&#xff0c;为 0 时隐藏number | slot0falseoverflowCount展示封顶的数字值number99falseshowZero当数值为 0 时&#xff0c;是否展…

Django实现音乐网站 ⑵

使用Python Django框架制作一个音乐网站&#xff0c;在系列文章1的基础上继续开发&#xff0c;本篇主要是后台歌手表模块开发。 目录 表结构设计 歌手表&#xff08;singer&#xff09;结构 创建表模型 设置图片上传路径 创建上传文件目录 生成表迁移 执行创建表 后台管…

PUBG(最短路BFS)

题目&#xff1a;https://ac.nowcoder.com/acm/contest/62106/E 最近&#xff0c;喜爱ACM的PBY同学沉迷吃鸡&#xff0c;无法自拔&#xff0c;于是又来到了熟悉的ERANGEL。经过一番搜寻&#xff0c;PBY同学准备动身前往安全区&#xff0c;但是&#xff0c;地图中埋伏了许多LYB&…

2023年第四届“华数杯”数学建模思路 - 案例:FPTree-频繁模式树算法

## 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 算法介绍 FP-Tree算法全称是FrequentPattern Tree算法&#xff0c;就是频繁模式树算法&#xff0c;他与Apriori算法一样也是用来挖掘频繁项集的&#xff0c…
最新文章