css实现三维Picade游戏街机立体效果代码-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：css实现三维Picade游戏街机立体效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">



  
  
<style>
/***********************/
/***********************/
/***********************/
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transform-style: preserve-3d;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  font-family: "Press Start 2P", cursive;
}

/***********************/
/***********************/
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  font-weight: bolder;
  overflow: hidden;
  cursor: pointer;
  background-color: #2f3295;
}

.face {
  position: absolute;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

/***********************/
/***********************/
.main {
  position: absolute;
  width: 49vmin;
  height: 49vmin;
  transform: perspective(700vmin) rotateX(70deg) rotateZ(40deg) translateZ(-29.75vmin);
  transition: transform 550ms ease-out;
}

.shadows {
  position: absolute;
  width: 100%;
  height: 100%;
  filter: blur(0.875vmin);
  transform: translateZ(-0.175vmin);
}

.shadow {
  position: absolute;
}
.shadow-1, .shadow-2 {
  top: -5%;
  left: -5%;
  width: 125%;
  height: 110%;
  background-color: #202266;
}
.shadow-2 {
  background-color: rgba(240, 70, 109, 0.05);
}
.shadow-3, .shadow-4 {
  top: -5%;
  left: -5%;
  width: 190%;
  height: 60%;
  transform-origin: top left;
  transform: skewY(-10deg);
  background-image: linear-gradient(-45deg, transparent 20%, #202266 20%);
}
.shadow-4 {
  background-image: linear-gradient(-45deg, transparent 20%, rgba(240, 70, 109, 0.05) 20%);
}
.shadow-5 {
  top: -2%;
  left: -2%;
  width: 104%;
  height: 104%;
  background-color: #121338;
}
.shadow-6 {
  top: -4%;
  left: -4%;
  width: 108%;
  height: 108%;
  border: 1.3125vmin solid rgba(181, 244, 244, 0.35);
}

.a {
  width: 49vmin;
  height: 49vmin;
  position: absolute;
  top: 0;
  left: 0;
}
.a__front {
  width: 49vmin;
  height: 14vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(35vmin);
}
.a__back {
  width: 49vmin;
  height: 14vmin;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-49vmin) translateY(-14vmin);
}
.a__right {
  width: 49vmin;
  height: 14vmin;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(49vmin) translateX(-49vmin) translateY(-14vmin);
}
.a__left {
  width: 49vmin;
  height: 14vmin;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-14vmin);
}
.a__top {
  width: 49vmin;
  height: 49vmin;
  transform-origin: top left;
  transform: translateZ(14vmin);
}
.a__bottom {
  width: 49vmin;
  height: 49vmin;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-49vmin);
}
.a__front {
  background-image: linear-gradient(to right, rgba(240, 70, 109, 0.25), rgba(240, 70, 109, 0.15) 5%, transparent 30% 80%, rgba(16, 16, 15, 0.5)), linear-gradient(to top, #131114, #2c292f);
  border-bottom: 0.4375vmin solid #b5f4f4;
}
.a__back::before {
  content: "";
  position: absolute;
  top: -4.2875vmin;
  width: 100%;
  height: 18.375vmin;
  background-image: linear-gradient(to bottom, #10100f, black);
  border-bottom: 0.4375vmin solid #b5f4f4;
}
.a__left::before {
  content: "";
  position: absolute;
  top: -4.2875vmin;
  width: 100%;
  height: 18.375vmin;
  background-image: linear-gradient(5deg, rgba(240, 70, 109, 0.1) 81.5%, transparent 81.5%), linear-gradient(5deg, #1d1b1f 20%, #2c292f 81.5%, transparent 81.5%);
  border-bottom: 0.4375vmin solid #b5f4f4;
}
.a__right::before {
  content: "";
  position: absolute;
  top: -4.2875vmin;
  width: 100%;
  height: 18.375vmin;
  background-image: linear-gradient(-5deg, #080809, #151417 81.5%, transparent 81.5%);
  border-bottom: 0.4375vmin solid #b5f4f4;
}
.a__top::before {
  content: "";
  position: absolute;
  transform-origin: bottom left;
  transform: rotateX(-5deg);
  width: 100%;
  height: 100%;
  background-color: #25222b;
  background-image: url("https://rawcdn.githack.com/ricardoolivaalonso/Codepen/a4afdbe8ef854010212f8ed4e2fe879442dada3a/Picade/mario.png");
  background-repeat: no-repeat;
  background-size: 66.5vmin 33.25vmin;
  background-position: center 100%;
}
.a__top::after {
  content: "";
  position: absolute;
  transform-origin: bottom left;
  transform: rotateX(-5deg);
  width: 100%;
  height: 100%;
  background-image: linear-gradient(-75deg, transparent 0 60%, rgba(181, 244, 244, 0.065) 65%, rgba(181, 244, 244, 0.15) 80%, transparent 85% 100%), linear-gradient(to right, rgba(240, 70, 109, 0.5), rgba(240, 70, 109, 0.2) 5%, transparent 25% 80%, rgba(16, 16, 15, 0.3));
}
.a__bottom {
  background-color: #202266;
}

.b {
  width: 49vmin;
  height: 21vmin;
  position: absolute;
  top: 0;
  transform: translateZ(18.2vmin);
}
.b__front {
  width: 49vmin;
  height: 35vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-14vmin);
}
.b__back {
  width: 49vmin;
  height: 35vmin;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-49vmin) translateY(-35vmin);
}
.b__right {
  width: 21vmin;
  height: 35vmin;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(49vmin) translateX(-21vmin) translateY(-35vmin);
}
.b__left {
  width: 21vmin;
  height: 35vmin;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-35vmin);
}
.b__top {
  width: 49vmin;
  height: 21vmin;
  transform-origin: top left;
  transform: translateZ(35vmin);
}
.b__bottom {
  width: 49vmin;
  height: 21vmin;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-49vmin);
}
.b__front::before {
  content: "";
  position: absolute;
  width: 100%;
  top: -0.875vmin;
  height: 38.5vmin;
  transform-origin: bottom left;
  transform: rotateX(12deg);
  background-color: #25222b;
  background-image: url("https://rawcdn.githack.com/ricardoolivaalonso/Codepen/a4afdbe8ef854010212f8ed4e2fe879442dada3a/Picade/smw.png"), linear-gradient(to bottom, #342f3c, #1e1b23);
  background-size: 80% 75%, 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.b__front::after {
  content: "";
  position: absolute;
  width: 100%;
  top: -0.875vmin;
  height: 38.5vmin;
  transform-origin: bottom left;
  transform: rotateX(12deg);
  background-image: linear-gradient(-75deg, transparent 0 50%, rgba(181, 244, 244, 0.05) 55%, rgba(181, 244, 244, 0.145) 70%, transparent 75% 100%), linear-gradient(to right, rgba(240, 70, 109, 0.2), rgba(240, 70, 109, 0.1) 5%, transparent 25% 80%, rgba(16, 16, 15, 0.3));
}
.b__back {
  background-color: #10100f;
}
.b__left::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 36.75vmin;
  background-image: linear-gradient(78deg, rgba(240, 70, 109, 0.1) 73%, transparent 73%), linear-gradient(78deg, #2c292f 73%, transparent 73%);
}
.b__right::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 36.75vmin;
  background-image: linear-gradient(-78deg, #151417 73%, transparent 73%);
}
.b__bottom::before {
  content: "";
  position: absolute;
  transform-origin: top left;
  transform: rotateX(5deg);
  width: 100%;
  height: 100%;
  background: pink;
}

.c {
  width: 49vmin;
  height: 17.15vmin;
  position: absolute;
  top: 0;
  transform: translateZ(50.75vmin);
}
.c__front {
  width: 49vmin;
  height: 10.5vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(6.65vmin);
}
.c__back {
  width: 49vmin;
  height: 10.5vmin;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-49vmin) translateY(-10.5vmin);
}
.c__right {
  width: 17.15vmin;
  height: 10.5vmin;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(49vmin) translateX(-17.15vmin) translateY(-10.5vmin);
}
.c__left {
  width: 17.15vmin;
  height: 10.5vmin;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-10.5vmin);
}
.c__top {
  width: 49vmin;
  height: 17.15vmin;
  transform-origin: top left;
  transform: translateZ(10.5vmin);
}
.c__bottom {
  width: 49vmin;
  height: 17.15vmin;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-49vmin);
}
.c__front::before {
  content: "";
  position: absolute;
  top: -3.0625vmin;
  width: 100%;
  height: 100%;
  transform-origin: top left;
  background-color: #25222b;
  background-image: url("https://rawcdn.githack.com/ricardoolivaalonso/Codepen/a4afdbe8ef854010212f8ed4e2fe879442dada3a/Picade/mario.png");
  background-repeat: no-repeat;
  background-size: 70vmin 35vmin;
  background-position: center 37%;
}
.c__front::after {
  content: "";
  position: absolute;
  top: -3.0625vmin;
  transform-origin: bott.........完整代码请登录后点击上方下载按钮下载查看