css实现三维厨房效果代码-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：css实现三维厨房效果代码，可操作电器开门等交互效果
下面为部分代码预览，完整代码请点击下载或在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: sans-serif;
}

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

.face {
  position: absolute;
}

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

/***********************/
/***********************/
.main {
  position: absolute;
  width: 45vw;
  height: 30vw;
  transform: perspective(30000px) rotateX(65deg) rotateZ(35deg) translateZ(-10vw);
  transition: transform 500ms linear;
}

@keyframes main {
  to {
    transform: perspective(30000px) rotateX(65deg) rotateZ(395deg) translateZ(-10vw);
  }
}
.shadow {
  background-color: #c7bfc0;
  position: absolute;
  transform: translateZ(-0.1vw);
}
.shadow--1 {
  width: 105%;
  height: 125%;
  bottom: -0.5vw;
  left: -0.5vw;
  box-shadow: 0.125vw 0.125vw 0.5vw #c7bfc0, -0.125vw 0.125vw 0.5vw #c7bfc0, 0.125vw -0.125vw 0.5vw #c7bfc0, -0.125vw -0.125vw 0.5vw #c7bfc0;
}
.shadow--2 {
  bottom: 30vw;
  left: 15vw;
  width: 30vw;
  height: 10vw;
  transform: skewX(-45deg);
  transform-origin: bottom left;
  background-color: #c7bfc0;
  box-shadow: 0.125vw 0.125vw 0.5vw #c7bfc0, -0.125vw 0.125vw 0.5vw #c7bfc0, 0.125vw -0.125vw 0.5vw #c7bfc0, -0.125vw -0.125vw 0.5vw #c7bfc0;
}
.shadow--3 {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #97898a;
  box-shadow: 0.125vw 0.125vw 0.5vw #635758, -0.125vw 0.125vw 0.5vw #635758, 0.125vw -0.125vw 0.5vw #635758, -0.125vw -0.125vw 0.5vw #635758;
  transform: translateZ(0.1vw);
}
.shadow--4 {
  position: absolute;
  width: 6vw;
  height: 30vw;
  left: 0;
  transform-origin: bottom left;
  transform: skewY(-35deg);
  background-image: repeating-linear-gradient(to top, rgba(87, 82, 78, 0.05) 0, rgba(87, 82, 78, 0.05) 1vw, transparent 1.125vw, transparent 2vw);
  border-right: 1.5vw solid rgba(87, 82, 78, 0.05);
  border-top: 1vw solid rgba(87, 82, 78, 0.05);
  padding-right: 1vw;
}

/*---------------------*/
.floor {
  width: 45vw;
  height: 30vw;
  position: absolute;
}
.floor__front {
  width: 45vw;
  height: 1vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(29vw);
}
.floor__back {
  width: 45vw;
  height: 1vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-45vw) translateY(-1vw);
}
.floor__right {
  width: 30vw;
  height: 1vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(45vw) translateX(-30vw) translateY(-1vw);
}
.floor__left {
  width: 30vw;
  height: 1vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-1vw);
}
.floor__top {
  width: 45vw;
  height: 30vw;
  transform-origin: top left;
  transform: translateZ(1vw);
}
.floor__bottom {
  width: 45vw;
  height: 30vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-45vw);
}
.floor__front {
  background-color: #3D3C3A;
  background-image: repeating-linear-gradient(to right, #3D3C3A 0, #3D3C3A 1vw, #232221 1vw, #302f2e 1.1vw, #302f2e 1.2vw);
  border-bottom: 0.5vw solid #232221;
}
.floor__back {
  background-color: #16100e;
  border-bottom: 0.5vw solid #060404;
}
.floor__right {
  background-color: #251B18;
  border-bottom: 0.5vw solid #16100e;
}
.floor__left {
  background-color: #57524E;
  border-bottom: 0.5vw solid #4a4542;
}
.floor__top {
  background-color: #57524E;
  background-image: linear-gradient(to bottom, rgba(25, 18, 16, 0.5) 2vw, transparent 3.25vw), linear-gradient(to right, rgba(22, 16, 14, 0.5) 0.25vw, transparent 1.25vw), linear-gradient(-40deg, transparent 19vw, rgba(235, 234, 233, 0.035) 19.5vw), linear-gradient(-40deg, transparent 4vw, rgba(37, 27, 24, 0.3) 4vw), linear-gradient(-40deg, transparent 19.25vw, rgba(37, 27, 24, 0.3) 19.5vw), linear-gradient(-40deg, transparent 3.8vw, rgba(37, 27, 24, 0.45) 3.8vw), radial-gradient(transparent 15vw, rgba(37, 27, 24, 0.4) 16vw), linear-gradient(-40deg, transparent 19.4vw, rgba(37, 27, 24, 0.3) 19.4vw), repeating-linear-gradient(to right, transparent 0, transparent 1vw, #373431 1vw, #4a4542 1.1vw, #4a4542 1.2vw);
  background-size: 30vw 30.1vw, 30.1vw 30vw, 30vw 21vw, 24vw 21.75vw, 30vw 15vw, 7vw 7.5vw, 30vw 100%, 30vw 100%, 100% 100%;
  background-position: top right;
  background-repeat: no-repeat;
}
.floor__bottom {
  background-color: #251B18;
  border-bottom: 0.5vw solid #16100e;
}

.wall-t {
  width: 30vw;
  height: 1vw;
  position: absolute;
  top: 0;
  right: 0;
  transform: translateZ(1vw);
}
.wall-t__front {
  width: 30vw;
  height: 20vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-19vw);
}
.wall-t__back {
  width: 30vw;
  height: 20vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-30vw) translateY(-20vw);
}
.wall-t__right {
  width: 1vw;
  height: 20vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(30vw) translateX(-1vw) translateY(-20vw);
}
.wall-t__left {
  width: 1vw;
  height: 20vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-20vw);
}
.wall-t__top {
  width: 30vw;
  height: 1vw;
  transform-origin: top left;
  transform: translateZ(20vw);
}
.wall-t__bottom {
  width: 30vw;
  height: 1vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-30vw);
}
.wall-t__front {
  background-color: #5c5753;
  background-image: linear-gradient(to bottom, transparent, #120e0d), linear-gradient(to top, #271f1c, #302622 10%, transparent 70%), linear-gradient(to right, #271f1c, transparent), linear-gradient(45deg, #484746 5vw, transparent 5vw), linear-gradient(45deg, #484746 5vw, transparent 5vw), linear-gradient(45deg, #484746 5vw, transparent 5vw), linear-gradient(to top, rgba(18, 14, 13, 0.35), rgba(61, 60, 59, 0.6) 20%, rgba(71, 70, 69, 0.8)), linear-gradient(65deg, rgba(63, 62, 61, 0.5) 8.5vw, transparent 8.75vw);
  background-size: 100% 90%, 100% 10%, 3vw 14vw, 6vw 7vw, 6vw 7vw, 6vw 7vw, 24vw 14vw, 100% 100%;
  background-position: 0 100%, 0 100%, 0 100%, 100% 43%, 100% 66%, 100% 100%, 0 5.5vw, 0 0;
  background-repeat: no-repeat;
}
.wall-t__back {
  background-color: #302622;
  background-image: linear-gradient(to top, #120e0d, #271f1c 20%, transparent 50%);
}
.wall-t__right {
  background-color: #302622;
  background-image: linear-gradient(to top, #030302, transparent 30%);
}
.wall-t__left {
  background-color: #615c58;
}
.wall-t__top {
  background-color: #615c58;
  background-image: linear-gradient(to top, #66615d, transparent);
}
.wall-t__bottom {
  background-color: #302622;
}

.wall-la,
.wall-lb {
  width: 1vw;
  height: 8vw;
  position: absolute;
  right: 30vw;
  transform: translateZ(1vw);
}
.wall-la__front,
.wall-lb__front {
  width: 1vw;
  height: 20vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-12vw);
}
.wall-la__back,
.wall-lb__back {
  width: 1vw;
  height: 20vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-1vw) translateY(-20vw);
}
.wall-la__right,
.wall-lb__right {
  width: 8vw;
  height: 20vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(1vw) translateX(-8vw) translateY(-20vw);
}
.wall-la__left,
.wall-lb__left {
  width: 8vw;
  height: 20vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-20vw);
}
.wall-la__top,
.wall-lb__top {
  width: 1vw;
  height: 8vw;
  transform-origin: top left;
  transform: translateZ(20vw);
}
.wall-la__bottom,
.wall-lb__bottom {
  width: 1vw;
  height: 8vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-1vw);
}

.wall-la {
  top: 0;
}

.wall-lb {
  bottom: 0;
}

.wall-lc {
  width: 1vw;
  height: 14vw;
  position: absolute;
  top: 8vw;
  right: 30vw;
  transform: translateZ(16vw);
}
.wall-lc__front {
  width: 1vw;
  height: 5vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(9vw);
}
.wall-lc__back {
  width: 1vw;
  height: 5vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-1vw) translateY(-5vw);
}
.wall-lc__right {
  width: 14vw;
  height: 5vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(1vw) translateX(-14vw) translateY(-5vw);
}
.wall-lc__left {
  width: 14vw;
  height: 5vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-5vw);
}
.wall-lc__top {
  width: 1vw;
  height: 14vw;
  transform-origin: top left;
  transform: translateZ(5vw);
}
.wall-lc__bottom {
  width: 1vw;
  height: 14vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-1vw);
}
.wall-lc__right {
  background-color: #302622;
}
.wall-lc__left {
  background-color: #615c58;
}
.wall-lc__top {
  background-color: #615c58;
  background-image: linear-gradient(to left, #66615d, transparent);
}
.wall-lc__bottom {
  background-color: #302622;
}

.wall-la__front,
.wall-lb__front {
  background-color: #474645;
  background-image: linear-gradient(to bottom, #69645f, transparent);
}
.wall-la__back,
.wall-lb__back {
  background-color: #302622;
  background-image: linear-gradient(to top, #120e0d, #271f1c 20%, transparent 50%);
}
.wall-la__right,
.wall-lb__right {
  background-color: #302622;
  background-image: linear-gradient(to top, #120e0d, transparent);
  background-size: 100% 20%;
  background-position: 0 100%;
  background-repeat: no-repeat;
}
.wall-la__left,
.wall-lb__left {
  background-color: #615c58;
  background-image: linear-gradient(to bottom, transparent, #3c3836), linear-gradient(to top, #464340, transparent);
  background-size: 100% 70%, 100% 20%;
  background-position: 0 100%;
  background-repeat: no-repeat;
}
.wall-la__top,
.wall-lb__top {
  background-color: #615c58;
  background-image: linear-gradient(to left, #66615d, transparent);
}
.wall-la__bottom,
.wall-lb__bottom {
  background-color: #302622;
}

.door {
  width: 2vw;
  height: 14vw;
  position: absolute;
  right: 29.5vw;
  top: 8vw;
  transform: translateZ(1vw);
  background-color: rgba(37, 27, 24, 0.3);
}

.door-l,
.door-r {
  width: 2vw;
  height: 1vw;
  position: absolute;
}
.door-l__front,
.door-r__front {
  width: 2vw;
  height: 15vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-14vw);
}
.door-l__back,
.door-r__back {
  width: 2vw;
  height: 15vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-2vw) translateY(-15vw);
}
.door-l__right,
.door-r__right {
  width: 1vw;
  height: 15vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(2vw) translateX(-1vw) translateY(-15vw);
}
.door-l__left,
.door-r__left {
  width: 1vw;
  height: 15vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-15vw);
}
.door-l__top,
.door-r__top {
  width: 2vw;
  height: 1vw;
  transform-origin: top left;
  transform: translateZ(15vw);
}
.door-l__bottom,
.door-r__bottom {
  width: 2vw;
  height: 1vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-2vw);
}
.door-l__front,
.door-r__front {
  background-color: #DCD7D3;
  background-image: linear-gradient(to top, #bab0a8, #d1cac5 10%, transparent);
}
.door-l__back,
.door-r__back {
  background-color: #a19c9c;
}
.door-l__right,
.door-r__right {
  background-color: #b5b1b1;
  background-image: linear-gradient(to top, #bab0a8, #d1cac5 10%, transparent);
}
.door-l__left,
.door-r__left {
  background-color: #f0efee;
  background-image: linear-gradient(to top, #d8d6d4, #e4e2e1 10%, transparent);
}
.door-l__top,
.door-r__top {
  background-color: #dfdddc;
}
.door-l__bottom,
.door-r__bottom {
  background-color: #b5b1b1;
}

.door-l {
  top: 0;
}

.door-r {
  bottom: 0;
}

.door-t {
  width: 2vw;
  height: 12vw;
  position: absolute;
  top: 1vw;
  transform: translateZ(14vw);
}
.door-t__front {
  width: 2vw;
  height: 1vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(11vw);
}
.door-t__back {
  width: 2vw;
  height: 1vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-2vw) translateY(-1vw);
}
.door-t__right {
  width: 12vw;
  height: 1vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(2vw) translateX(-12vw) translateY(-1vw);
}
.door-t__left {
  width: 12vw;
  height: 1vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-1vw);
}
.door-t__top {
  width: 2vw;
  height: 12vw;
  transform-origin: top left;
  transform: translateZ(1vw);
}
.door-t__bottom {
  width: 2vw;
  height: 12vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-2vw);
}
.door-t__front {
  background-color: #DCD7D3;
}
.door-t__back {
  background-color: #a9a4a4;
}
.door-t__right {
  background-color: #b5b1b1;
}
.door-t__left {
  background-color: #f0efee;
}
.door-t__top {
  background-color: #dfdddc;
}
.door-t__bottom {
  background-color: #b5b1b1;
}

.door-1,
.door-2 {
  position: absolute;
  left: 0.5vw;
  width: 1vw;
  height: 6vw;
}

.door-1 {
  top: 1vw;
}

.door-2 {
  bottom: 1vw;
  transform-origin: bottom left;
  transition: transform 1000ms linear;
}

.is-door-open {
  transform: rotateZ(45deg);
  transition: transform 1000ms linear;
}

.door-1r,
.door-1l {
  width: 1vw;
  height: 0.5vw;
  position: absolute;
}
.door-1r__front,
.door-1l__front {
  width: 1vw;
  height: 14vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-13.5vw);
}
.door-1r__back,
.door-1l__back {
  width: 1vw;
  height: 14vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-1vw) translateY(-14vw);
}
.door-1r__right,
.door-1l__right {
  width: 0.5vw;
  height: 14vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(1vw) translateX(-0.5vw) translateY(-14vw);
}
.door-1r__left,
.door-1l__left {
  width: 0.5vw;
  height: 14vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-14vw);
}
.door-1r__top,
.door-1l__top {
  width: 1vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: translateZ(14vw);
}
.door-1r__bottom,
.door-1l__bottom {
  width: 1vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-1vw);
}
.door-1r__front,
.door-1l__front {
  background-color: #e6e5e4;
}
.door-1r__back,
.door-1l__back {
  background-color: #9c9797;
}
.door-1r__right,
.door-1l__right {
  background-color: #b0acac;
}
.door-1r__left,
.door-1l__left {
  background-color: #dfdddc;
}
.door-1r__top,
.door-1l__top {
  background-color: #DCD7D3;
}
.door-1r__bottom,
.door-1l__bottom {
  background-color: #b5b1b1;
}

.door-1l {
  bottom: 0;
}

.door-1b,
.door-1c,
.door-1c2,
.door-1t {
  width: 1vw;
  height: 5vw;
  position: absolute;
  top: 0.5vw;
}
.door-1b__front,
.door-1c__front,
.door-1c2__front,
.door-1t__front {
  width: 1vw;
  height: 0.5vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(4.5vw);
}
.door-1b__back,
.door-1c__back,
.door-1c2__back,
.door-1t__back {
  width: 1vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-1vw) translateY(-0.5vw);
}
.door-1b__right,
.door-1c__right,
.door-1c2__right,
.door-1t__right {
  width: 5vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(1vw) translateX(-5vw) translateY(-0.5vw);
}
.door-1b__left,
.door-1c__left,
.door-1c2__left,
.door-1t__left {
  width: 5vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
}
.door-1b__top,
.door-1c__top,
.door-1c2__top,
.door-1t__top {
  width: 1vw;
  height: 5vw;
  transform-origin: top left;
  transform: translateZ(0.5vw);
}
.door-1b__bottom,
.door-1c__bottom,
.door-1c2__bottom,
.door-1t__bottom {
  width: 1vw;
  height: 5vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-1vw);
}
.door-1b__front,
.door-1c__front,
.door-1c2__front,
.door-1t__front {
  background-color: #ebeae9;
}
.door-1b__back,
.door-1c__back,
.door-1c2__back,
.door-1t__back {
  background-color: #a9a4a4;
}
.door-1b__right,
.door-1c__right,
.door-1c2__right,
.door-1t__right {
  background-color: #b0acac;
}
.door-1b__left,
.door-1c__left,
.door-1c2__left,
.door-1t__left {
  background-color: #e6e5e4;
}
.door-1b__top,
.door-1c__top,
.door-1c2__top,
.door-1t__top {
  background-color: #d1cac5;
}
.door-1b__bottom,
.door-1c__bottom,
.door-1c2__bottom,
.door-1t__bottom {
  background-color: #b5b1b1;
}

.door-1c {
  transform: translateZ(4.5vw);
}

.door-1c2 {
  transform: translateZ(9vw);
}

.door-1t {
  transform: translateZ(13.5vw);
}

.door__glass {
  position: absolute;
  top: 0.5vw;
  left: 50%;
  width: 14vw;
  height: 5vw;
  transform-origin: left;
  transform: rotateY(-90deg);
  background-color: rgba(181, 177, 177, 0.2);
  overflow: hidden;
}
.door__glass::after, .door__glass::before {
  content: "";
  position: absolute;
  width: 10vw;
  height: 10vw;
  border-radius: 50%;
  background-color: rgba(235, 234, 233, 0.075);
  box-shadow: 0.5vw 0.5vw 1vw rgba(235, 234, 233, 0.025), -0.5vw 0.5vw 1vw rgba(235, 234, 233, 0.025), 0.5vw -0.5vw 1vw rgba(235, 234, 233, 0.025), -0.5vw -0.5vw 1vw rgba(235, 234, 233, 0.025);
}
.door__glass::after {
  left: 0vw;
  top: 2vw;
}
.door__glass::before {
  bottom: 2vw;
  right: 1vw;
  width: 5vw;
  height: 5vw;
  opacity: 0.5;
}

.fence {
  width: 1vw;
  height: 30vw;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateZ(1vw);
  background-color: rgba(37, 27, 24, 0.5);
}

.fence__shadow-c,
.fence__shadow {
  position: absolute;
  width: 6vw;
  height: 30vw;
  overflow: hidden;
  left: 1vw;
}

.fence__shadow {
  left: 0;
  transform-origin: bottom left;
  transform: skewY(-35deg);
  background-image: repeating-linear-gradient(to top, rgba(61, 60, 58, 0.65) 0, rgba(61, 60, 58, 0.65) 1vw, transparent 1.125vw, transparent 2vw);
  border-right: 0.5vw solid rgba(61, 60, 58, 0.8);
  padding-right: 1vw;
}

.fence-r,
.fence-l {
  width: 1vw;
  height: 0.5vw;
  position: absolute;
}
.fence-r__front,
.fence-l__front {
  width: 1vw;
  height: 8vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-7.5vw);
}
.fence-r__back,
.fence-l__back {
  width: 1vw;
  height: 8vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-1vw) translateY(-8vw);
}
.fence-r__right,
.fence-l__right {
  width: 0.5vw;
  height: 8vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(1vw) translateX(-0.5vw) translateY(-8vw);
}
.fence-r__left,
.fence-l__left {
  width: 0.5vw;
  height: 8vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-8vw);
}
.fence-r__top,
.fence-l__top {
  width: 1vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: translateZ(8vw);
}
.fence-r__bottom,
.fence-l__bottom {
  width: 1vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-1vw);
}

.fence-l {
  bottom: 0;
}

.fence-b,
.fence-t {
  width: 1vw;
  height: 29vw;
  position: absolute;
  top: 0.5vw;
}
.fence-b__front,
.fence-t__front {
  width: 1vw;
  height: 0.5vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(28.5vw);
}
.fence-b__back,
.fence-t__back {
  width: 1vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-1vw) translateY(-0.5vw);
}
.fence-b__right,
.fence-t__right {
  width: 29vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(1vw) translateX(-29vw) translateY(-0.5vw);
}
.fence-b__left,
.fence-t__left {
  width: 29vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
}
.fence-b__top,
.fence-t__top {
  width: 1vw;
  height: 29vw;
  transform-origin: top left;
  transform: translateZ(0.5vw);
}
.fence-b__bottom,
.fence-t__bottom {
  width: 1vw;
  height: 29vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-1vw);
}

.fence-b {
  transform: translateZ(1vw);
}
.fence-b__top {
  background-image: radial-gradient(rgba(37, 27, 24, 0.85), transparent);
}

.fence-t {
  transform: translateZ(7vw);
}
.fence-t__top {
  background-image: linear-gradient(to right, #625c58 50%, transparent);
}

.fence-l__front,
.fence-r__front,
.fence-b__front,
.fence-t__front,
.fence-m__front {
  background-color: #3D3C3A;
  background-image: linear-gradient(to top, rgba(37, 27, 24, 0.85), transparent);
}
.fence-l__back,
.fence-r__back,
.fence-b__back,
.fence-t__back,
.fence-m__back {
  background-color: #251B18;
}
.fence-l__right,
.fence-r__right,
.fence-b__right,
.fence-t__right,
.fence-m__right {
  background-color: #251B18;
  background-image: linear-gradient(to top, rgba(37, 27, 24, 0.85) 50%, transparent);
}
.fence-l__left,
.fence-r__left,
.fence-b__left,
.fence-t__left,
.fence-m__left {
  background-color: #57524E;
  background-image: linear-gradient(to bottom, #6d6661, transparent);
}
.fence-l__top,
.fence-r__top,
.fence-b__top,
.fence-t__top,
.fence-m__top {
  background-color: #57524E;
}
.fence-l__bottom,
.fence-r__bottom,
.fence-b__bottom,
.fence-t__bottom,
.fence-m__bottom {
  background-color: #251B18;
}

.fence-m {
  width: 0.5vw;
  height: 0.5vw;
  position: absolute;
  transform: translateZ(1.5vw);
  top: 2vw;
  left: 0.25vw;
}
.fence-m__front {
  width: 0.5vw;
  height: 5.5vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-5vw);
}
.fence-m__back {
  width: 0.5vw;
  height: 5.5vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-0.5vw) translateY(-5.5vw);
}
.fence-m__right {
  width: 0.5vw;
  height: 5.5vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.5vw) translateX(-0.5vw) translateY(-5.5vw);
}
.fence-m__left {
  width: 0.5vw;
  height: 5.5vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-5.5vw);
}
.fence-m__top {
  width: 0.5vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: translateZ(5.5vw);
}
.fence-m__bottom {
  width: 0.5vw;
  height: 0.5vw;
  transform-origin: top left.........完整代码请登录后点击上方下载按钮下载查看