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: bottom left;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(-75deg, transparent 0 40%, rgba(181, 244, 244, 0.025) 55%, rgba(181, 244, 244, 0.1) 70%, transparent 80% 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));
  border: 0.525vmin solid #b5f4f4;
  box-shadow: 0 0 1.75vmin rgba(181, 244, 244, 0.25);
}
.c__back {
  background-image: linear-gradient(to bottom, #1f1f1e, #10100f);
}
.c__left::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: top left;
  transform: skewY(-10deg);
  background-image: linear-gradient(to bottom, rgba(240, 70, 109, 0.1), rgba(240, 70, 109, 0.05)), linear-gradient(to bottom, #3b373f, #2c292f);
}
.c__left::after {
  content: "";
  position: absolute;
  right: 3.5vmin;
  width: 7vmin;
  height: 5.25vmin;
  background-image: repeating-linear-gradient(to bottom, #151417 0 0.875vmin, transparent 0.875vmin 1.75vmin);
  transform: skewY(-10deg);
}
.c__right::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: top right;
  transform: skewY(10deg);
  background-image: linear-gradient(to bottom, #242327, #151417);
}
.c__right::after {
  content: "";
  position: absolute;
  left: 3.5vmin;
  width: 7vmin;
  height: 5.25vmin;
  background-image: repeating-linear-gradient(to bottom, #10100f 0 0.875vmin, transparent 0.875vmin 1.75vmin);
  transform: skewY(10deg);
}
.c__top::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 17.5vmin;
  transform: rotateX(10deg);
  transform-origin: top left;
  background-image: linear-gradient(to top, rgba(240, 70, 109, 0.05), transparent), linear-gradient(to top, #342f3c, #25222b);
}
.c__bottom::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 17.5vmin;
  transform: rotateX(-10deg);
  transform-origin: top left;
  background-image: linear-gradient(to top, #060606, #151417);
}

.d,
.e {
  width: 1.75vmin;
  height: 1.225vmin;
  position: absolute;
  transform: translateZ(16.1875vmin) rotateX(12deg);
}
.d__front,
.e__front {
  width: 1.75vmin;
  height: 38.5vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-37.275vmin);
}
.d__back,
.e__back {
  width: 1.75vmin;
  height: 38.5vmin;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-1.75vmin) translateY(-38.5vmin);
}
.d__right,
.e__right {
  width: 1.225vmin;
  height: 38.5vmin;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.75vmin) translateX(-1.225vmin) translateY(-38.5vmin);
}
.d__left,
.e__left {
  width: 1.225vmin;
  height: 38.5vmin;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-38.5vmin);
}
.d__top,
.e__top {
  width: 1.75vmin;
  height: 1.225vmin;
  transform-origin: top left;
  transform: translateZ(38.5vmin);
}
.d__bottom,
.e__bottom {
  width: 1.75vmin;
  height: 1.225vmin;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-1.75vmin);
}
.d__front,
.e__front {
  background-color: #b5f4f4;
  border-left: 0.65625vmin solid #25222b;
  border-right: 0.65625vmin solid #25222b;
}
.d__left,
.e__left {
  background-color: #2c292f;
  background-image: linear-gradient(to left, rgba(240, 70, 109, 0.1) 73%, rgba(240, 70, 109, 0.1) 73%);
}
.d__right,
.e__right {
  background-color: #151417;
}
.d__top,
.e__top {
  background-color: #b5f4f4;
}
.d__bottom,
.e__bottom {
  background-color: #b5f4f4;
}

.d {
  bottom: 26.6875vmin;
  left: 0.4375vmin;
}

.e {
  bottom: 26.6875vmin;
  right: 0.4375vmin;
}

.cylinder {
  position: absolute;
  width: 1.75vmin;
  height: 1.75vmin;
  top: 31.9375vmin;
  left: 9.1875vmin;
  transform: translateZ(14vmin) rotateZ(-135deg);
}
.cylinder .circle {
  width: 1.75vmin;
  height: 1.75vmin;
  position: absolute;
}
.cylinder .circle-a {
  position: absolute;
  width: 5.25vmin;
  height: 1.75vmin;
  transform: rotateY(90deg) translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
}
.cylinder .circle-a__side {
  position: absolute;
  height: 0.3828125vmin;
  width: 5.25vmin;
  background-color: #626262;
}
.cylinder .circle-a__side:nth-of-type(1) {
  transform: rotateX(22.5deg) translateZ(0.875vmin);
  background-color: #888888;
}
.cylinder .circle-a__side:nth-of-type(2) {
  transform: rotateX(45deg) translateZ(0.875vmin);
  background-color: #888888;
}
.cylinder .circle-a__side:nth-of-type(3) {
  transform: rotateX(67.5deg) translateZ(0.875vmin);
  background-color: #888888;
}
.cylinder .circle-a__side:nth-of-type(4) {
  transform: rotateX(90deg) translateZ(0.875vmin);
  background-color: #888888;
}
.cylinder .circle-a__side:nth-of-type(5) {
  transform: rotateX(112.5deg) translateZ(0.875vmin);
  background-color: #888888;
}
.cylinder .circle-a__side:nth-of-type(6) {
  transform: rotateX(135deg) translateZ(0.875vmin);
  background-color: #888888;
}
.cylinder .circle-a__side:nth-of-type(7) {
  transform: rotateX(157.5deg) translateZ(0.875vmin);
  background-color: #888888;
}
.cylinder .circle-a__side:nth-of-type(8) {
  transform: rotateX(180deg) translateZ(0.875vmin);
  background-color: #888888;
}
.cylinder .circle-a__side:nth-of-type(9) {
  transform: rotateX(202.5deg) translateZ(0.875vmin);
  background-color: #888888;
}
.cylinder .circle-a__side:nth-of-type(10) {
  transform: rotateX(225deg) translateZ(0.875vmin);
  background-color: #888888;
}
.cylinder .circle-a__side:nth-of-type(11) {
  transform: rotateX(247.5deg) translateZ(0.875vmin);
  background-color: #888888;
}
.cylinder .circle-a__side:nth-of-type(12) {
  transform: rotateX(270deg) translateZ(0.875vmin);
  background-color: #888888;
}
.cylinder .circle-a__side:nth-of-type(13) {
  transform: rotateX(292.5deg) translateZ(0.875vmin);
  background-color: #888888;
}
.cylinder .circle-a__side:nth-of-type(14) {
  transform: rotateX(315deg) translate.........完整代码请登录后点击上方下载按钮下载查看