【HTML + CSS 魔法秀】打造惊艳 3D 旋转卡片

HTML结构

  • box 类是整个组件的容器。
  • item-wrap 类是每个旋转卡片的包装器,每个都有一个内联样式--i,用于控制动画的延迟。
  • item类是实际的卡片内容,包含一个图片。
typescript 复制代码
<template>
  <div class="box">
    <div class="item-wrap" style="--i: 0">
      <div class="item"><img src="@/static/common_bot.png" alt="img" class="image" /></div>
    </div>
    <div class="item-wrap" style="--i: 1">
      <div class="item"><img src="@/static/common_bot.png" alt="img" class="image" /></div>
    </div>
    <div class="item-wrap" style="--i: 2">
      <div class="item"><img src="@/static/common_bot.png" alt="img" class="image" /></div>
    </div>
    <div class="item-wrap" style="--i: 3">
      <div class="item"><img src="@/static/common_bot.png" alt="img" class="image" /></div>
    </div>
    <div class="item-wrap" style="--i: 4">
      <div class="item"><img src="@/static/common_bot.png" alt="img" class="image" /></div>
    </div>
    <div class="item-wrap" style="--i: 5">
      <div class="item"><img src="@/static/common_bot.png" alt="img" class="image" /></div>
    </div>
  </div>
</template>

CSS样式

  • .item-wrap 使用display: contents;来移除包装器的边界框,只保留子元素的边界框。
  • animation 属性定义了一个名为slide的关键帧动画,每个.item-wrap根据--i变量的不同而有不同的延迟。
  • .item 类包含了一个transform属性,用于控制卡片的平移和缩放。
  • transition 属性定义了.item变换的过渡效果。
javascript 复制代码
<style scoped>
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: calc(100vh - 300px);
  background: rgba(31, 48, 53, 0.8);
}

.image {
  width: 100%;
  height: 100%;
}

@property --index {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}

@keyframes slide {
  0% {
    --index: 0;
  }

  100% {
    --index: 6;
  }
}

.item-wrap {
  display: contents;
  animation: slide 12s calc(-2s * var(--i)) steps(6) infinite;
}

.item {
  position: absolute;
  display: grid;
  place-content: center;
  width: 180px;
  height: 180px;
  border-radius: 8px;
  background-color: rgba(67, 141, 255, 0.4);
  border: 1px solid rgba(67, 141, 255, 0.8);
  color: #fff;
  font-size: 30px;
  counter-increment: num;
  transform: translate(var(--translate)) scale(var(--scale));
  transition: .5s transform;
  animation: slide 12s calc(-2s * var(--i)) infinite;
}

.item-wrap:hover.item {
  animation-play-state: paused;
}

@container style(--index: 0) {
  .item {
    transform: translate(0, 0) scale(1);
    z-index: 4;
  }
}

@container style(--index: 1) {
  .item {
    transform: translate(120%, -30%) scale(0.9);
    z-index: 3;
  }
}

@container style(--index: 2) {
  .item {
    transform: translate(100%, -70%) scale(0.8);
    z-index: 2;
  }
}

@container style(--index: 3) {
  .item {
    transform: translate(0, -90%) scale(0.7);
    z-index: 1;
  }
}

@container style(--index: 4) {
  .item {
    transform: translate(-100%, -70%) scale(0.8);
    z-index: 2;
  }
}

@container style(--index: 5) {
  .item {
    transform: translate(-120%, -30%) scale(0.9);
    z-index: 3;
  }
}
</style>
相关推荐
WebDesign_Mu2 小时前
为了庆祝2025英雄联盟全球总决赛开启,我用HTML+CSS+JS制作了LOL官方网站
javascript·css·html
做好一个小前端3 小时前
后端接口获取到csv格式内容并导出,拒绝乱码
前端·javascript·html
携欢3 小时前
PortSwigger靶场之将 XSS 存储到onclick带有尖括号和双引号 HTML 编码以及单引号和反斜杠转义的事件中通关秘籍
前端·html·xss
程序猿阿伟6 小时前
《3D山地场景渲染进阶:GPU驱动架构下细节与性能平衡的6大技术实践》
3d·架构
2401_863801466 小时前
Cesium格式模型制作,3dtiles制作B3DM格式文件制作。数字孪生模型制作
3d
Bellafu6668 小时前
selenium的css定位方式有哪些
css·selenium·tensorflow
我有一棵树9 小时前
前端开发中 SCSS 变量与 CSS 变量的区别与实践选择,—— 两种变量别混为一谈
前端·css·scss
rising start10 小时前
前端基础一、HTML5
前端·html·html5
Never_Satisfied10 小时前
在JavaScript / HTML中,div容器在内容过多时不显示超出的部分
开发语言·javascript·html
im_AMBER10 小时前
CSS 01【基础语法学习】
前端·css·笔记·学习