div+css布局实现三维房子模型效果-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：div+css布局实现三维房子模型效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

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

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

.face {
  position: absolute;
}

/***************/
.house {
  position: absolute;
  width: 36vw;
  height: 24vw;
  transform: perspective(20000px) rotateX(75deg) rotateZ(35deg) translateZ(-9vw);
  transition: transform .1s linear;
}

.shadows {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.shadow-a {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 130%;
  height: 103%;
  transform-origin: top right;
  transform: skewY(-3deg);
  background-color: #686688;
  box-shadow: -1vw 1vw 1.5vw #686688;
  filter: blur(0.5vw);
}

.shadow-b {
  position: absolute;
  top: 0;
  width: 100%;
  height: 101.5%;
  background-color: #5f5d7c;
}

/***************/
/***************/
.al {
  width: 3vw;
  height: 24vw;
  position: absolute;
  left: 0;
  top: 0;
}
.al__front {
  width: 30vw;
  height: 0.4vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(23.6vw);
}
.al__back {
  width: 30vw;
  height: 0.4vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-30vw) translateY(-0.4vw);
}
.al__right {
  width: 24vw;
  height: 0.4vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(30vw) translateX(-24vw) translateY(-0.4vw);
}
.al__left {
  width: 24vw;
  height: 0.4vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.4vw);
}
.al__top {
  width: 30vw;
  height: 24vw;
  transform-origin: top left;
  transform: translateZ(0.4vw);
}
.al__bottom {
  width: 30vw;
  height: 24vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-30vw);
}
.al__front {
  background-image: linear-gradient(to right, #8985ad, #c4c2d6);
}
.al__back {
  background-color: #c4c2d6;
}
.al__right {
  background-color: #fbfbfb;
}
.al__left {
  background-color: #7a76a3;
}
.al__top {
  background-image: linear-gradient(to right, #a7a4c2 40%, #e5e5e5, #f2f2f2);
}
.al__top::before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 13vw;
  height: 7vw;
  background-image: linear-gradient(-135deg, transparent 20%, rgba(169, 215, 207, 0.75));
}
.al__top::after {
  content: '';
  position: absolute;
  bottom: 1vw;
  left: 6vw;
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  background-image: radial-gradient(rgba(251, 251, 251, 0.25), transparent);
  filter: blur(0.7vw);
}
.al__bottom {
  background-color: #c4c2d6;
}

.ab {
  width: 8vw;
  height: 8vw;
  position: absolute;
  right: 0;
  bottom: 0;
}
.ab__front {
  width: 8vw;
  height: 0.4vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(7.6vw);
}
.ab__back {
  width: 8vw;
  height: 0.4vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-8vw) translateY(-0.4vw);
}
.ab__right {
  width: 8vw;
  height: 0.4vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(8vw) translateX(-8vw) translateY(-0.4vw);
}
.ab__left {
  width: 8vw;
  height: 0.4vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.4vw);
}
.ab__top {
  width: 8vw;
  height: 8vw;
  transform-origin: top left;
  transform: translateZ(0.4vw);
}
.ab__bottom {
  width: 8vw;
  height: 8vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-8vw);
}
.ab__front {
  background-color: #c4c2d6;
}
.ab__back {
  background-color: #c4c2d6;
}
.ab__right {
  background-color: #fbfbfb;
}
.ab__left {
  background-color: #fbfbfb;
}
.ab__top {
  background-color: #f2f2f2;
}
.ab__bottom {
  background-color: #c4c2d6;
}

.at {
  width: 8vw;
  height: 4vw;
  position: absolute;
  right: 0;
  top: 0;
}
.at__front {
  width: 8vw;
  height: 0.4vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(3.6vw);
}
.at__back {
  width: 8vw;
  height: 0.4vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-8vw) translateY(-0.4vw);
}
.at__right {
  width: 4vw;
  height: 0.4vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(8vw) translateX(-4vw) translateY(-0.4vw);
}
.at__left {
  width: 4vw;
  height: 0.4vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.4vw);
}
.at__top {
  width: 8vw;
  height: 4vw;
  transform-origin: top left;
  transform: translateZ(0.4vw);
}
.at__bottom {
  width: 8vw;
  height: 4vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-8vw);
}
.at__front {
  background-color: #c4c2d6;
}
.at__back {
  background-color: #c4c2d6;
}
.at__right {
  background-color: #fbfbfb;
}
.at__left {
  background-color: #fbfbfb;
}
.at__top {
  background-color: #f2f2f2;
}
.at__bottom {
  background-color: #c4c2d6;
}

.ac {
  width: 6vw;
  height: 12vw;
  position: absolute;
  right: 0;
  top: 4vw;
}
.ac__front {
  width: 6vw;
  height: 1vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(11vw);
}
.ac__back {
  width: 6vw;
  height: 1vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-1vw);
}
.ac__right {
  width: 12vw;
  height: 1vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-12vw) translateY(-1vw);
}
.ac__left {
  width: 12vw;
  height: 1vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-1vw);
}
.ac__top {
  width: 6vw;
  height: 12vw;
  transform-origin: top left;
  transform: translateZ(1vw);
}
.ac__bottom {
  width: 6vw;
  height: 12vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-6vw);
}
.ac .face {
  opacity: .9;
}
.ac__front {
  background-color: #4d6d98;
  opacity: .75;
}
.ac__back {
  background-color: #4d6d98;
}
.ac__right {
  background-image: linear-gradient(to top, #6187be, #7095c9);
}
.ac__left {
  background-color: #16273c;
}
.ac__top {
  opacity: .75;
  background-image: linear-gradient(to right, #7095c9 0, #7095c9 5%, #6187be 20%, #6187be 30%, #7095c9 40%, #7095c9 65%, #658dc5 70%, #658dc5 72%, #7095c9 85%);
  box-shadow: inset 0.5vw 0.5vw 2vw rgba(251, 251, 251, 0.5);
}
.ac__top::before {
  content: '';
  position: absolute;
  width: 40%;
  height: 100%;
  overflow: hidden;
  background-image: linear-gradient(to bottom, transparent 0, transparent 10%, rgba(97, 135, 190, 0.9) 15%, rgba(97, 135, 190, 0.9) 40%, rgba(251, 251, 251, 0.2) 40%, rgba(251, 251, 251, 0.2) 50%, transparent 60%);
  filter: blur(0.15vw);
}
.ac__bottom {
  background-color: #4d6d98;
}
.ac__bottom::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: -0.25vw 0.25vw 1vw #234062;
}

/***************/
/***************/
.bce {
  width: 17vw;
  height: 20.5vw;
  position: absolute;
  right: 6vw;
  top: 0;
  transform: translateZ(0.41vw);
}
.bce__front {
  width: 17vw;
  height: 0.5vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(21.5vw);
}
.bce__back {
  width: 17vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-17vw) translateY(-0.5vw);
}
.bce__right {
  width: 22vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(17vw) translateX(-22vw) translateY(-0.5vw);
}
.bce__left {
  width: 22vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
}
.bce__top {
  width: 17vw;
  height: 22vw;
  transform-origin: top left;
  transform: translateZ(0.5vw);
}
.bce__bottom {
  width: 17vw;
  height: 22vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-17vw);
}
.bce__front {
  background-image: linear-gradient(to right, #a7a4c2, #c4c2d6);
}
.bce__back {
  background-color: #c4c2d6;
}
.bce__right {
  background-color: #f2f2f2;
}
.bce__left {
  background-color: #c4c2d6;
}
.bce__top {
  background-image: linear-gradient(135deg, #a7a4c2 60%, #f2f2f2);
}
.bce__bottom {
  background-color: #c4c2d6;
}
.bce__bottom::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 101%;
  background-color: #675D6E;
  filter: blur(0.35vw);
}

.bci {
  width: 16vw;
  height: 21vw;
  position: absolute;
  right: 6vw;
  top: 0;
  transform: translateZ(0.92vw);
}
.bci__front {
  width: 16vw;
  height: 0.5vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(20.5vw);
}
.bci__back {
  width: 16vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-16vw) translateY(-0.5vw);
}
.bci__right {
  width: 21vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(16vw) translateX(-21vw) translateY(-0.5vw);
}
.bci__left {
  width: 21vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
}
.bci__top {
  width: 16vw;
  height: 21vw;
  transform-origin: top left;
  transform: translateZ(0.5vw);
}
.bci__bottom {
  width: 16vw;
  height: 21vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-16vw);
}
.bci__front {
  background-image: linear-gradient(to right, #a7a4c2, #c4c2d6);
}
.bci__back {
  background-color: #c4c2d6;
}
.bci__right {
  background-color: #f2f2f2;
}
.bci__left {
  background-color: #c4c2d6;
}
.bci__top {
  background-image: linear-gradient(135deg, #a7a4c2 60%, #f2f2f2);
}
.bci__top::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 16.4vw;
  background-color: #d7d6ea;
}
.bci__top::after {
  content: '';
  position: absolute;
  bottom: 1.5vw;
  left: 1vw;
  width: 10vw;
  height: 3.5vw;
  border-radius: 50%;
  background-image: radial-gradient(#badfd9, transparent);
  filter: blur(0.5vw);
}
.bci__bottom {
  background-color: #c4c2d6;
}
.bci__bottom::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 101%;
  background-color: #675D6E;
  filter: blur(0.35vw);
}

.bl {
  width: 13vw;
  height: 17vw;
  position: absolute;
  left: 0;
  top: 0;
  transform: translateZ(0.41vw);
}
.bl__front {
  width: 13.1vw;
  height: 0.5vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(16.5vw);
}
.bl__back {
  width: 13.1vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-13.1vw) translateY(-0.5vw);
}
.bl__right {
  width: 17vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(13.1vw) translateX(-17vw) translateY(-0.5vw);
}
.bl__left {
  width: 17vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
}
.bl__top {
  width: 13.1vw;
  heig.........完整代码请登录后点击上方下载按钮下载查看