【CSS】3D卡片效果

效果

index.html

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

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

相关推荐
乖女子@@@2 小时前
css3新增-网格Grid布局
前端·css·css3
Sapphire~4 小时前
重学前端013 --- 响应式网页设计 CSS网格布局
前端·css
二十雨辰6 小时前
歌词滚动效果
前端·css
hashiqimiya7 小时前
html实现右上角有个图标,鼠标移动到该位置出现手型,点击会弹出登录窗口。
前端·html
BillKu10 小时前
Vue3 中使用 DOMPurify 对渲染动态 HTML 进行安全净化处理
前端·安全·html
VSORender_Farm11 小时前
新手该选哪款软件?3ds Max vs Blender深度对比
3d·渲染·blender·云渲染·设计·建筑·效果图
渊鱼L13 小时前
CAD球体密堆积_圆柱体试件3D插件 球体颗粒在圆柱容器内的堆积建模
3d
dllmayday13 小时前
FontForge 手工扩展 iconfont.ttf
css·qt
云飞云共享云桌面18 小时前
昆山精密机械公司8个Solidworks共用一台服务器
运维·服务器·网络·3d·自动化·制造
BUG创建者18 小时前
html获取16个随机颜色并不重复
css·html·css3