js实现扑克牌视觉差异互动点击三维翻转效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：js实现扑克牌视觉差异互动点击三维翻转效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
@charset "UTF-8";
@property --rotateY {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --bg-y {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --bg-x {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
:root {
  --card-front: url(//repo.bfw.wiki/bfwrepo/svg/card/card-7.svg);
  --card-back: url(//repo.bfw.wiki/bfwrepo/svg/card/card-back-exported.svg);
  --card-front-red: url(//repo.bfw.wiki/bfwrepo/svg/card/card-7-red.svg);
  --card-back-red: url(//repo.bfw.wiki/bfwrepo/svg/card/card-back-exported-red.svg);
  --size: 30vw;
  --radius: 10px;
  --rotateY: 0;
  --hue: 0;
  --offset: 1px;
  --debug: 0;
  --scale: 1;
}

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #443267;
  grid-gap: 42px;
  overflow: hidden;
}
body:before {
  top: 0;
  left: 0;
  background: cyan;
}
body:after {
  top: unset;
  left: unset;
  bottom: 0;
  right: 0;
  background: magenta;
}
body:before, body:after {
  content: "";
  opacity: 0.6;
  margin: 0;
  width: 90vw;
  height: 50%;
  z-index: 0;
  filter: blur(20vw);
}

*,
*:before,
*:after {
  box-sizing: border-box;
  outline: calc(var(--debug) * 1px) solid hsl(calc(var(--hue) * 1deg), 60%, 60%);
  outline-offset: calc(var(--offset) * 1px);
}

.card-container {
  perspective: 800px;
  transform-style: preserve-3d;
  position: relative;
  transform: scale(var(--scale));
  transition: --scale 0.2s;
  z-index: 1;
}

.card {
  cursor: pointer;
  /* add cursor pointer to show that the element is clickable */
  width: var(--size);
  max-width: 300px;
  aspect-ratio: 2.2/3;
  border-radius: var(--radius);
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.05), 0 8px 4px rgba(0, 0, 0, 0.05), 0 16px 18px rgba(0, 0, 0, 0.05), 0 32px 16px rgba(0, 0, 0, 0.05);
  background-color: #fff;
  background-image: var(--card-front), linear-gradient(to bottom left, white, rgba(0, 0, 0, 0.3));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 85%, 100%;
  position: relative;
  transform: rotateY(calc(var(--bg-y) * 3 * -1deg)) rotateX(calc(var(--bg-x) * 3 * 1deg)) translateZ(10px);
  transform-style: preserve-3d;
  transition: --rotateY 0.1s linear;
  backface-visibility: hidden;
  will-change: tranform;
}
.card:before {
  backface-visibility: hidden;
}
.card:before {
  content: "❤️";
  white-space: pre;
  color: white;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  background: var(--card-back) no-repeat center center/contain;
  transform: translateZ(-1px) translateX(0) rotateY(180deg) scaleX(1.09);
  font-family: sans-serif;
  font-size: calc(var(--size) / 15);
  color: #5f61c8;
  text-shadow: -1px -1px 0px rgba(255, 255, 255, 0.8), 1px 1px 0px rgba(0, 0, 0, 0.6);
  will-change: tranform;
}
.card:not(:hover) {
  transition: --bg-y 0.1s linear, --bg-x 0.1s linear;
}
.card[data-color=red] {
  background-image: var(--card-front-red), linear-gradient(to bottom left, white, rgba(0, 0, 0, 0.3));
}
.card[data-color=red]:before {
  background: var(--card-back-red) no-repeat center center/contain;
  color: #de817c;
}
@media (hover: none) {
  .card:hover, .card:hover:before, .card:focus, .card:focus:before {
    transition: none;
  }
}

.card-container {
  /* Need to reverse the y axis when clicked*/
}
.card-container:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(26, 26, 26, 0.2);
  transform: translateZ(-200px) translate(calc(var(--shadow-rotation, var(--bg-y)) * 12 * 1px), calc(var(--shadow-rotat.........完整代码请登录后点击上方下载按钮下载查看