vue+css实现三维两人打牌场景效果代码-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：vue+css实现三维两人打牌场景效果代码，左键单击并拖动以旋转，单击鼠标中键并拖动以移动模型，滚轮缩放。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
body {
  height: 100vh;
  margin: 0;
  background-color: #555;
  overflow: hidden;
  font-family: monospace, sans-serif;
}
body * {
  box-sizing: border-box;
}
body #app {
  height: 100vh;
  display: grid;
}
body #view {
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 500px;
  border: 0;
  outline: 0;
}
body #view * {
  transform-style: preserve-3d;
}
body #view #space {
  position: relative;
  display: grid;
  grid-template-areas: "overlap";
  transform-style: preserve-3d;
  justify-content: center;
  align-items: flex-end;
  transform: rotateX(-20deg) rotateY(20deg);
  font-size: calc(5vh + 1vw);
  transform-origin: center 90%;
  -pointer-events: none;
}
body #view #space > * {
  grid-area: overlap;
}
body #view #space .reference {
  transform-style: preserve-3d;
  display: grid;
  grid-template-areas: "overlap";
}
body #view #space .reference > * {
  grid-area: overlap;
  transform-origin: top left;
  align-items: end;
}
body #view #space .absolute {
  position: absolute;
}
body #view #space .cuboid,
body #view #space .plane {
  width: var(--sizeX);
  height: var(--sizeY);
  transform: translateX(var(--posX)) translateY(calc(var(--posY) * -1)) translateZ(var(--posZ)) rotateX(var(--rotX)) rotateY(var(--rotY)) rotateZ(var(--rotZ));
  align-items: start;
}
body #view #space .cuboid.test > *, body #view #space .cuboid.plane.test,
body #view #space .plane.test > *,
body #view #space .plane.plane.test {
  border: solid 1px black;
  background: linear-gradient(#f005, #00f5);
  box-shadow: 0 0 0 1px #0005;
}
body #view #space .cuboid.test > *.top, body #view #space .cuboid.plane.test.top,
body #view #space .plane.test > *.top,
body #view #space .plane.plane.test.top {
  background: radial-gradient(#fff 5%, #f0f5 20%);
}
body #view #space .cuboid.test > *.bottom, body #view #space .cuboid.plane.test.bottom,
body #view #space .plane.test > *.bottom,
body #view #space .plane.plane.test.bottom {
  background: radial-gradient(#000 5%, #0f05 20%);
}
body #view #space .cuboid._top > .top, body #view #space .cuboid._bottom > .bottom, body #view #space .cuboid._right > .right, body #view #space .cuboid._left > .left, body #view #space .cuboid._front > .front, body #view #space .cuboid._back > .back,
body #view #space .plane._top > .top,
body #view #space .plane._bottom > .bottom,
body #view #space .plane._right > .right,
body #view #space .plane._left > .left,
body #view #space .plane._front > .front,
body #view #space .plane._back > .back {
  display: none;
}
body #view #space .cuboid .top,
body #view #space .plane .top {
  height: var(--sizeZ);
  width: var(--sizeX);
  transform: rotateX(90deg);
}
body #view #space .cuboid .bottom,
body #view #space .plane .bottom {
  height: var(--sizeZ);
  width: var(--sizeX);
  transform: translateY(var(--sizeY)) rotateX(90deg);
}
body #view #space .cuboid .left,
body #view #space .plane .left {
  height: var(--sizeY);
  width: var(--sizeZ);
  transform: rotateY(-90deg);
}
body #view #space .cuboid .right,
body #view #space .plane .right {
  height: var(--sizeY);
  width: var(--sizeZ);
  transform: translateX(var(--sizeX)) rotateY(-90deg);
}
body #view #space .cuboid .front,
body #view #space .plane .front {
  width: var(--sizeX);
  height: var(--sizeY);
  transform: translateZ(var(--sizeZ));
}
body #view #space .cuboid .back,
body #view #space .plane .back {
  width: var(--sizeX);
  height: var(--sizeY);
}
body #view #space .cuboid.shaded > .front, body #view #space .cuboid.shaded > .back,
body #view #space .plane.shaded > .front,
body #view #space .plane.shaded > .back {
  filter: brightness(0.9);
}
body #view #space .cuboid.shaded > .left, body #view #space .cuboid.shaded > .right,
body #view #space .plane.shaded > .left,
body #view #space .plane.shaded > .right {
  filter: brightness(0.8);
}
body #view #space .group {
  transform: translateX(calc(var(--posX))) translateY(calc(var(--posY) * -1)) translateZ(var(--posZ)) rotateX(var(--rotX)) rotateY(var(--rotY)) rotateZ(var(--rotZ));
}
body #view #space .group > .reference {
  align-items: end;
}
body #view #space .group.shaded > .reference .cuboid > .front, body #view #space .group.shaded > .reference .cuboid > .back {
  filter: brightness(0.9);
}
body #view #space .group.shaded > .reference .cuboid > .left, body #view #space .group.shaded > .reference .cuboid > .right {
  filter: brightness(0.8);
}
body #view #space .group.shaded > .reference .cuboid > .bottom {
  filter: brightness(0.7);
}

#floor > * {
  background: top left/100% 0.5em linear-gradient(#0002 50%, #0001 50%), top left/0.5em 100% linear-gradient(90deg, #0002 50%, #0001 50%), #624b39;
}

.outlined .cuboid > * {
  border: solid 1px black;
  box-shadow: 0 0 0 1px #0005;
}

.player,
#table {
  --hairColor: #bbb;
  --skinColor: #e0b2ab;
  --vestTexture: top left / 0.03em 100%
  		linear-gradient(90deg, #0000001a, #00000047),
  	#333;
}
.player .head,
#table .head {
  -webkit-animation: bobbleHead 5s linear infinite;
          animation: bobbleHead 5s linear infinite;
}
.player .cuboid.skin > *,
.player .plane.skin > *,
#table .cuboid.skin > *,
#table .plane.skin > * {
  background-color: var(--skinColor);
}
.player .cuboid.hat > *, .player .cuboid.skull > .bottom,
.player .plane.hat > *,
.player .plane.skull > .bottom,
#table .cuboid.hat > *,
#table .cuboid.skull > .bottom,
#table .plane.hat > *,
#table .plane.skull > .bottom {
  background-color: #222;
}
.player .cuboid.wood > *,
.player .plane.wood > *,
#table .cuboid.wood > *,
#table .plane.wood > * {
  background: top left/0.1em auto linear-gradient(90deg, #0002 50%, #0001 50%) #7b5d4b;
}
.player .cuboid.pants > *,
.player .plane.pants > *,
#table .cuboid.pants > *,
#table .plane.pants > * {
  background: top left/0.01em 100% linear-gradient(90deg, #5f5ffb88, #4242bb88), #4242bb;
}
.player .cuboid.vest > *,
.player .plane.vest > *,
#table .cuboid.vest > *,
#table .plane.vest > * {
  background: var(--vestTexture);
}
.player .cuboid.vest.forearm > :not(.bottom)::before,
.player .plane.vest.forearm > :not(.bottom)::before,
#table .cuboid.vest.forearm > :not(.bottom)::before,
#table .plane.vest.forearm > :not(.bottom)::before {
  content: "";
  display: block;
  width: 100%;
  height: 0.1em;
  background-color: #fff;
}
.player .cuboid.vest.forearm > :not(.bottom).right::before,
.player .plane.vest.forearm > :not(.bottom).right::before,
#table .cuboid.vest.forearm > :not(.bottom).right::before,
#table .plane.vest.forearm > :not(.bottom).right::before {
  background: 0.015em top/auto auto radial-gradient(circle, #1115, #111 0.02em, #0000 0.02em) no-repeat, #fff;
}
.player .cuboid.vest.body > .left::before, .player .cuboid.vest.body > .left::after,
.player .plane.vest.body > .left::before,
.player .plane.vest.body > .left::after,
#table .cuboid.vest.body > .left::before,
#table .cuboid.vest.body > .left::after,
#table .plane.vest.body > .left::before,
#table .plane.vest.body > .left::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.player .cuboid.vest.body > .left::before,
.player .plane.vest.body > .left::before,
#table .cuboid.vest.body > .left::before,
#table .plane.vest.body > .left::before {
  background-color: #fff;
  -webkit-clip-path: polygon(20% 0, 50% 50%, 80% 0);
          clip-path: polygon(20% 0, 50% 50%, 80% 0);
}
.player .cuboid.vest.body > .left::after,
.player .plane.vest.body > .left::after,
#table .cuboid.vest.body > .left::after,
#table .plane.vest.body > .left::after {
  background: 50% top/0.05em 0.05em radial-gradient(circle, #ac836f, #513520 0.012em, #0000 0.014em) repeat-y, calc(50% + 0.02em) top/0.1em 100% linear-gradient(90deg, #0000, #0005 10%, #0000 12% 50%, #0005 52%, #0000 65%) no-repeat;
  -webkit-clip-path: polygon(20% 0, 50% 50%, 80% 0);
          clip-path: polygon(20% 0, 50% 50%, 80% 0);
}
.player .cuboid.glasses,
.player .plane.glasses,
#table .cuboid.glasses,
#table .plane.glasses {
  --glassesColor: #c89e3b;
  background: center 80%/0.12em 0.02em linear-gradient(var(--glassesColor), var(--glassesColor)) no-repeat;
  filter: drop-shadow(0 0 0.01em #0005);
}
.player .cuboid.glasses::before, .player .cuboid.glasses::after,
.player .plane.glasses::before,
.player .plane.glasses::after,
#table .cuboid.glasses::before,
#table .cuboid.glasses::after,
#table .plane.glasses::before,
#table .plane.glasses::after {
  content: "";
  display: block;
  height: 0.12em;
  width: 0.12em;
  background: radial-gradient(#0000 55%, var(--glassesColor) 60% 65%, #0000 70%);
  position: absolute;
}
.player .cuboid.glasses::before,
.player .plane.glasses::before,
#table .cuboid.glasses::before,
#table .plane.glasses::before {
  bottom: 0;
  left: 60%;
}
.player .cuboid.glasses::after,
.player .plane.glasses::after,
#table .cuboid.glasses::after,
#table .plane.glasses::after {
  bottom: 0;
  right: 60%;
}
.player .cuboid.brows::before, .player .cuboid.brows::after,
.player .plane.brows::before,
.player .plane.brows::after,
#table .cuboid.brows::before,
#table .cuboid.brows::after,
#table .plane.brows::before,
#table .plane.brows::after {
  content: "";
  display: block;
  width: 0.1em;
  height: 0.04em;
  background-color: var(--hairColor);
  position: absolute;
  filter: drop-shadow(0 0 0.01em #0005);
  bottom: -10%;
}
.player .cuboid.brows::before,
.player .plane.brows::before,
#table .cuboid.brows::before,
#table .plane.brows::before {
  left: 60%;
  transform: rotate(-10deg);
}
.player .cuboid.brows::after,
.player .plane.brows::after,
#table .cuboid.brows::after,
#table .plane.brows::after {
  right: 60%;
  transform: rotate(10deg);
}
.player .cuboid.eyes::before, .player .cuboid.eyes::after,
.player .plane.eyes::before,
.player .plane.eyes::after,
#table .cuboid.eyes::before,
#table .cuboid.eyes::after,
#table .plane.eyes::before,
#table .plane.eyes::after {
  content: "";
  display: block;
  width: 0.04em;
  height: 0.04em;
  background-color: #111;
  position: absolute;
  filter: drop-shadow(0 0 0.01em #0005);
  bottom: 25%;
  border-radius: 50%;
}
.player .cuboid.eyes::before,
.player .plane.eyes::before,
#table .cuboid.eyes::before,
#table .plane.eyes::before {
  left: 68%;
}
.player .cuboid.eyes::after,
.player .plane.eyes::after,
#table .cuboid.eyes::after,
#table .plane.eyes::after {
  right: 68%;
}
.player .cuboid.mouth,
.player .plane.mouth,
#table .cuboid.mouth,
#table .plane.mouth {
  background-color: #111;
  -webkit-clip-path: circle(30% at 50% 60%);
          clip-path: circle(30% at 50% 60%);
}
.player .cuboid.hair > *,
.player .plane.hair > *,
#table .cuboid.hair > *,
#table .plane.hair > * {
  background-color: var(--hairColor);
}
.player .cuboid.shoe > *,
.player .plane.shoe > *,
#table .cuboid.shoe > *,
#table .plane.shoe > * {
  background: radial-gradient(#0000, #ffffff08), #130f0c;
}
.player .cub.........完整代码请登录后点击上方下载按钮下载查看