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

HTML结构

• box 类是整个组件的容器。
• item-wrap 类是每个旋转卡片的包装器，每个都有一个内联样式–i，用于控制动画的延迟。
• item类是实际的卡片内容，包含一个图片。

<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变换的过渡效果。

<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>

原文地址：https://blog.csdn.net/weixin_52814911/article/details/142874365

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！