div+css实现三维悬浮卡片翻转透视效果代码-html代码-BFW代码库

代码语言：html

所属分类：悬停

代码描述：div+css实现三维悬浮卡片翻转透视效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@300;600;900&display=swap" rel="stylesheet">
<style>
    :root {
  --level-one: translateZ(1em);
  --level-two: translateZ(2em);
  --level-three: translateZ(3em);
  --transition: transform 333.3333333333ms ease;
  --anim-duration: 1000ms;
  --easing: cubic-bezier(0.5, -0.3, 0.5, 1);
  --perspective: 600px;
  --border-radius: 1em;
  --fw-normal: 400;
  --fw-bold: 700;
  --color-bg: hsl(209, 100%, 30%);
  --color-medium: #646a72;
  --color-dark: #212429;
  --color-light: #eee;
  --color-link: #b4e7ff;
  --color-link-hover: #fbb587;
  --card-text-bg: rgba(0,0,0,0.7);
  --flipped-card-bg: black;
  --flip-card-btn: #6CCC54;
  --flip-btn-shd: #6CCC54;
  --card-border-clr: black;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

main {
    margin-top:100px;
  display: grid;
  justify-content: center;
}

@-webkit-keyframes card-flip {
  0% {
    transform: rotateY(0turn);
  }
  20% {
    -webkit-transform: rotateY(0turn) rotateZ(1deg);
  }
  70%, 94%, 100% {
    -webkit-transform: rotateY(-0.5turn);
  }
  96% {
    -webkit-transform: rotateY(-0.52turn);
  }
  98% {
    -webkit-transform: rotateY(-0.48turn);
  }
}

@keyframes card-flip {
  0% {
    transform: rotateY(0turn);
  }
  20% {
    -webkit-transform: rotateY(0turn) rotateZ(1deg);
  }
  70%, 94%, 100% {
    -webkit-transform: rotateY(-0.5turn);
  }
  96% {
    -webkit-transform: rotateY(-0.52turn);
  }
  98% {
    -webkit-transform: rotateY(-0.48turn);
  }
}
@-webkit-keyframes card-lift {
  0%, 90%, 100% {
    transform: scale(1);
  }
  70% {
    transform: scale(1.3);
  }
  95% {
    transform: scale(1.03);
  }
}
@keyframes card-lift {
  0%, 90%, 100% {
    transform: scale(1);
  }
  70% {
    transform: scale(1.3);
  }
  95% {
    transform: scale(1.03);
  }
}
@-webkit-keyframes extrude-1 {
  0% {
    -webkit-transform: translateZ(0);
  }
  25%, 100% {
    -webkit-transform: translateZ(1em);
  }
}
@keyframes extrude-1 {
  0% {
    transform: translateZ(0);
  }
  25%, 100% {
    transform: translateZ(1em);
  }
}
@-webkit-keyframes extrude-2 {
  0% {
    transform: translateZ(0);
  }
  25%, 100% {
    transform: translateZ(2em);
  }
}
@keyframes extrude-2 {
  0% {
    transform: translateZ(0);
  }
  25%, 100% {
    transform: translateZ(2em);
  }
}
@-webkit-keyframes extrude-3 {
  0%, 100% {
    transform: translateZ(0);
  }
  50% {
    transform: translateZ(3em);
  }
}
@keyframes extrude-3 {
  0%, 100% {
    transform: translateZ(0);
  }
  50% {
    transform: translateZ(3em);
  }
}
@-webkit-keyframes flatten-1 {
  0%, 75% {
    transform: translateZ(1em);
  }
  100% {
    transform: translateZ(0);
  }
}
@keyframes flatten-1 {
  0%, 75% {
    transform: translateZ(1em);
  }
  100% {
    transform: translateZ(0);
  }
}
@-webkit-keyframes flatten-2 {
  0%, 75% {
    transform: translateZ(2em);
  }
  100% {
    transform: translateZ(0);
  }
}
@keyframes flatten-2 {
  0%, 75% {
    transform: translateZ(2em);
  }
  100% {
    transform: translateZ(0);
  }
}
@-webkit-keyframes flatten-3 {
  0%, 75% {
    transform: translateZ(3em);
  }
  100% {
    transform: translateZ(0);
  }
}
@keyframes flatten-3 {
  0%, 75% {
    transform: translateZ(3em);
  }
  100% {
    transform: translateZ(0);
  }
}
@-webkit-keyframes glow {
  to {
    box-shadow: 0 0 20px #f17d2e, 0 0 10px #f17d2e;
    color: white;
    text-shadow: 0 0 2px white;
  }
}
@keyframes glow {
  to {
    box-shadow: 0 0 20px #f17d2e, 0 0 10px #f17d2e;
    color: white;
    text-shadow: 0 0 2px white;
  }
}
main .card {
  width: 20em;
  height: 30em;
  padding: 1em;
  perspective: var(--perspective);
  position: relative;
}

main .card:hover .card__front::before,
main .card:focus .card__front::before {
  -webkit-animation: extrude-2 1000ms ease forwards;
  animation: extrude-2 1000ms ease forwards;
}

main .card:hover .card__back::before,
main .card:focus .card__back::before {
  -webkit-animation: flatten-2 1000ms ease forwards;
  animation: flatten-2 1000ms ease forwards;
}

main .card:hover .card__name,
main .card:focus .card__name {
  -webkit-animation: extrude-1 1000m.........完整代码请登录后点击上方下载按钮下载查看