css布局实现一个三维卧室效果代码-html代码-BFW代码库

代码语言：html
代码描述：css布局实现一个三维卧室效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
:root {
  --bg1: #8DD9E7;
  --bg2: #86C6D3;
  --bg3: #5C8F9B;
  --floor1: #EBE4D1;
  --floor2: #c9c5b3;
  --floor3: #bab6a6;
  --floor4: #a49e82;
  --wall1: #E3EAF0;
  --wall2: #CCD8DD;
  --wall2b: #c0ccd0;
  --wall2c: #b1bec2;
  --wall3: #9aadb5;
  --wood1: #FEEFCD;
  --wood2: #E8CFA9;
  --wood3: #CDAC8C;
  --wood3b: #bfa183;
  --wood4: #a48669;
  --wood5: #996951;
  --white1: #EDEDE4;
  --white2: #D9DFD4;
  --white3: #c3c9be;
  --white4: #aeb4a9;
  --blue1: #4F8FC0;
  --blue2: #4383b4;
  --blue3: #3473a3;
  --blue4: #27618c;
  --black1: #474747;
  --black2: #393939;
  --black3: #222222;
  --black4: #1a1a1a;
  --green1: #89B863;
  --green2: #6faa40;
  --green3: #59a11f;
  --yellow1: #e9e35a;
  --yellow2: #dbd54d;
  --yellow3: #d5ce32;
}

/***********************/
/***********************/
/************************/
/* Mixin para crear cubo ( Caras siempre al frente ) */
/************************/
/************************/
/* Mixin para crear rueda */
/************************/
/***********************/
/***********************/
/***********************/
/***********************/
/**/
*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  transform-style: preserve-3d;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  outline: none;
  appearance: none;
}

/* Generic */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: var(--bg1);
  overflow: hidden;
}

.face {
  position: absolute;
}

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

/***************/
/***************/
.room,
.shadows {
  position: absolute;
  width: 30vw;
  height: 45vw;
  transform: perspective(10000px) rotateX(60deg) rotateZ(55deg) translateZ(-8vw);
  transition: transform 100ms linear;
}

.shadow1, .shadow2, .shadow3, .shadow4, .shadow5, .shadow6 {
  position: absolute;
  top: 0vw;
  left: 0vw;
  background-color: var(--bg3);
  filter: blur(0.25vw);
}
.shadow1 {
  width: 30.25vw;
  height: 37.25vw;
}
.shadow2 {
  top: 37vw;
  left: 15vw;
  width: 15.25vw;
  height: 8.25vw;
}
.shadow3, .shadow4 {
  width: 12.25vw;
  height: 37.25vw;
  left: -12vw;
  background-color: transparent;
  background-image: linear-gradient(to left, var(--bg3), var(--bg2));
}
.shadow4 {
  width: 25vw;
  height: 1.25vw;
  top: 37vw;
  left: -10vw;
  filter: blur(1vw);
  opacity: 0.75;
}
.shadow5 {
  top: -2vw;
  left: 27vw;
  width: 5vw;
  height: 5vw;
  background-color: transparent;
  background-image: radial-gradient(circle, var(--bg3), var(--bg2) 80%, transparent);
  border-radius: 50%;
  filter: blur(1vw);
  opacity: 0.5;
}
.shadow6 {
  top: 45vw;
  left: 15vw;
  width: 15.25vw;
  height: 1.25vw;
  background-color: transparent;
  background-image: linear-gradient(to bottom, var(--bg3), var(--bg2) 80%, transparent);
  transform-origin: bottom right;
  filter: blur(1vw);
  opacity: 0.75;
}

.os {
  position: absolute;
  filter: blur(0.2vw);
  background-image: linear-gradient(to bottom, var(--floor2), transparent);
}

.fs {
  position: absolute;
  width: 115%;
  height: 110%;
  background-image: linear-gradient(to bottom, var(--floor3), var(--floor4), var(--floor4));
  filter: blur(0.175vw);
}

.lg {
  position: absolute;
  width: 5vw;
  height: 150%;
  transform: rotateZ(20deg);
  background-image: linear-gradient(to right, transparent, var(--white2), transparent);
  opacity: 0.35;
  filter: blur(0.5vw);
}

/***************/
/***************/
.at {
  position: absolute;
  top: 0vw;
  left: 0vw;
  width: 30vw;
  height: 37vw;
}
.at__front {
  width: 30vw;
  height: 0.6vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(36.4vw);
}
.at__back {
  width: 30vw;
  height: 0.6vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-30vw) translateY(-0.6vw);
}
.at__right {
  width: 37vw;
  height: 0.6vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(30vw) translateX(-37vw) translateY(-0.6vw);
}
.at__left {
  width: 37vw;
  height: 0.6vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.6vw);
}
.at__top {
  width: 30vw;
  height: 37vw;
  transform-origin: top left;
  transform: translateZ(0.6vw);
}
.at__bottom {
  width: 30vw;
  height: 37vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-30vw);
}
.at__top {
  overflow: hidden;
}
.at__top .os1 {
  width: 6vw;
  height: 100%;
  background-image: linear-gradient(to right, var(--floor3), transparent);
}
.at__top .os2 {
  width: 100%;
  height: 6vw;
}
.at__top .ws {
  position: absolute;
  filter: blur(0.45vw);
  background-color: var(--floor2);
  transform: skewX(-5deg);
}
.at__top .ws1,
.at__top .ws2,
.at__top .ws3 {
  left: 1.5vw;
  top: 1.5vw;
  width: 5vw;
  height: 20vw;
}
.at__top .ws2 {
  left: 27vw;
}
.at__top .ws3 {
  left: 52%;
  width: 0.5vw;
}
.at__top .ws4,
.at__top .ws5 {
  left: 1.5vw;
  top: 1.5vw;
  width: 28vw;
  height: 6vw;
}
.at__top .ws5 {
  top: 15.75vw;
}
.at__top .ws6 {
  left: 9vw;
  top: 1.5vw;
  width: 14vw;
  height: 10vw;
}
.at__top .ws7 {
  right: 2vw;
  top: 1.5vw;
  width: 3vw;
  height: 6vw;
}

.ab {
  position: absolute;
  top: 37vw;
  right: 0vw;
  width: 15vw;
  height: 8vw;
}
.ab__front {
  width: 15vw;
  height: 0.6vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(7.4vw);
}
.ab__back {
  width: 15vw;
  height: 0.6vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-15vw) translateY(-0.6vw);
}
.ab__right {
  width: 8vw;
  height: 0.6vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(15vw) translateX(-8vw) translateY(-0.6vw);
}
.ab__left {
  width: 8vw;
  height: 0.6vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.6vw);
}
.ab__top {
  width: 15vw;
  height: 8vw;
  transform-origin: top left;
  transform: translateZ(0.6vw);
}
.ab__bottom {
  width: 15vw;
  height: 8vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-15vw);
}

.at__front,
.ab__front {
  background-color: var(--wall3);
}
.at__back,
.ab__back {
  background-color: var(--wall2);
}
.at__right,
.ab__right {
  background-color: var(--wall2);
}
.at__left,
.ab__left {
  background-color: var(--wall2c);
}
.at__top,
.ab__top {
  background-color: var(--floor1);
}
.at__bottom,
.ab__bottom {
  background-color: var(--wall3);
}

/********/
.bb,
.bbl,
.bbr,
.bt {
  position: absolute;
  top: 0;
  left: 1.5vw;
  width: 28.5vw;
  height: 1.5vw;
  transform: translateZ(0.6vw);
}
.bb__front,
.bbl__front,
.bbr__front,
.bt__front {
  width: 28.5vw;
  height: 3vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-1.5vw);
}
.bb__back,
.bbl__back,
.bbr__back,
.bt__back {
  width: 28.5vw;
  height: 3vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-28.5vw) translateY(-3vw);
}
.bb__right,
.bbl__right,
.bbr__right,
.bt__right {
  width: 1.5vw;
  height: 3vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(28.5vw) translateX(-1.5vw) translateY(-3vw);
}
.bb__left,
.bbl__left,
.bbr__left,
.bt__left {
  width: 1.5vw;
  height: 3vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-3vw);
}
.bb__top,
.bbl__top,
.bbr__top,
.bt__top {
  width: 28.5vw;
  height: 1.5vw;
  transform-origin: top left;
  transform: translateZ(3vw);
}
.bb__bottom,
.bbl__bottom,
.bbr__bottom,
.bt__bottom {
  width: 28.5vw;
  height: 1.5vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-28.5vw);
}
.bb__front,
.bbl__front,
.bbr__front,
.bt__front {
  background-color: var(--wall2b);
}
.bb__front .os1,
.bbl__front .os1,
.bbr__front .os1,
.bt__front .os1 {
  width: 100%;
  height: 100%;
  bottom: 0;
  background-image: linear-gradient(to top, var(--wall2c), transparent);
}
.bb__front .os2,
.bbl__front .os2,
.bbr__front .os2,
.bt__front .os2 {
  width: 100%;
  height: 1vw;
  bottom: 0;
  background-image: linear-gradient(to top, var(--wall3), transparent);
}
.bb__back .os1,
.bbl__back .os1,
.bbr__back .os1,
.bt__back .os1 {
  width: 100%;
  height: 6vw;
  bottom: 0;
  background-image: linear-gradient(to top, var(--wall2b), transparent);
}

.bt {
  transform: translateZ(12.6vw);
}

.bbl,
.bbr {
  position: absolute;
  top: 0;
  left: 1.5vw;
  width: 3vw;
  height: 1.5vw;
  transform: translateZ(3.6vw);
}
.bbl__front,
.bbr__front {
  width: 3vw;
  height: 9vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-7.5vw);
}
.bbl__back,
.bbr__back {
  width: 3vw;
  height: 9vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-3vw) translateY(-9vw);
}
.bbl__right,
.bbr__right {
  width: 1.5vw;
  height: 9vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(3vw) translateX(-1.5vw) translateY(-9vw);
}
.bbl__left,
.bbr__left {
  width: 1.5vw;
  height: 9vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-9vw);
}
.bbl__top,
.bbr__top {
  width: 3vw;
  height: 1.5vw;
  transform-origin: top left;
  transform: translateZ(9vw);
}
.bbl__bottom,
.bbr__bottom {
  width: 3vw;
  height: 1.5vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-3vw);
}

.bbr {
  left: 27vw;
}

.bl {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.5vw;
  height: 37vw;
  transform: translateZ(0.6vw);
}
.bl__front {
  width: 1.5vw;
  height: 15vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(22vw);
}
.bl__back {
  width: 1.5vw;
  height: 15vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-1.5vw) translateY(-15vw);
}
.bl__right {
  width: 37vw;
  height: 15vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.5vw) translateX(-37vw) translateY(-15vw);
}
.bl__left {
  width: 37vw;
  height: 15vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-15vw);
}
.bl__top {
  width: 1.5vw;
  height: 37vw;
  transform-origin: top left;
  transform: translateZ(15vw);
}
.bl__bottom {
  width: 1.5vw;
  height: 37vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-1.5vw);
}
.bl__front {
  background-color: var(--wall3);
}
.bl__right {
  overflow: hidden;
}
.bl__right .os0 {
  position: absolute;
  width: 50%;
  height: 200%;
  bottom: -74%;
  left: 72%;
  transform: rotateZ(55deg);
  background-image: linear-gradient(to top, var(--wall2), var(--wall2b));
}
.bl__right .os1 {
  width: 100%;
  height: 10vw;
  bottom: 0;
  background-image: linear-gradient(to top, var(--wall2b), var(--wall2b), transparent);
}
.bl__right .os2 {
  width: 100%;
  height: 1vw;
  bottom: 0;
  background-image: linear-gradient(to top, var(--wall3), var(--wall2b));
}
.bl__right .os3 {
  width: 10.25vw;
  height: 4.25vw;
  bottom: 0;
  left: 1.75vw;
  background-image: linear-gradient(to top, var(--wall3), var(--wall2c));
}
.bl__right .os4 {
  width: 8.25vw;
  height: 5vw;
  top: 2.5vw;
  left: 2.75vw;
  background-image: linear-gradient(to top, var(--wall3), var(--wall2c));
}
.bl__right .os5 {
  width: 4.5vw;
  height: 4.5vw;
  bottom: 0;
  left: 12vw;
  background-image: linear-gradient(to top, var(--wall3), var(--wall2c));
}
.bl__right .os6 {
  width: 19.5vw;
  height: 12.35vw;
  bottom: 0;
  right: 1.25vw;
  background-image: linear-gradient(to top, var(--wall2c), var(--wall2c));
}
.bl__left .os1 {
  width: 100%;
  heig.........完整代码请登录后点击上方下载按钮下载查看