100个div实现三维客厅布局效果
代码语言:html
所属分类:三维
代码描述:100个div实现三维客厅布局效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
background-color: #306bff;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
perspective: 320px;
transform-style: preserve-3d;
}
#living_room {
width: 480px;
height: 240px;
flex-shrink: 0;
flex-grow: 0;
transform-style: preserve-3d;
transition: transform 100ms ease-out;
}
.wall {
width: 480px;
height: 230px;
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
}
.wall.wall-1 {
background-color: #e2e2e2;
transform: translateZ(240px);
}
.wall.wall-2 {
background-color: #c9c9c9;
transform: rotateY(90deg) translateZ(240px);
}
.wall.wall-3 {
background-color: #c9c9c9;
transform: rotateY(180deg) translateZ(240px);
}
.wall.wall-4 {
background-color: #e2e2e2;
transform: rotateY(270deg) translateZ(240px);
}
.carpet {
background-color: #a81120;
width: 240px;
height: 240px;
position: absolute;
top: -40px;
left: 120px;
transform-style: preserve-3d;
transform: rotateX(90deg) translateY(20px) translateZ(-149px);
}
.table-cloth {
background-color: #fafa41;
width: 80px;
height: 80px;
position: absolute;
top: -10px;
left: 120px;
transform-style: preserve-3d;
transform: rotateX(90deg) translateX(80px) translateY(50px) translateZ(-149px) rotateZ(45deg);
}
.counter-cloth {
background-color: #bc41fa;
width: 50px;
height: 50px;
position: absolute;
top: 0px;
left: 120px;
transform-style: preserve-3d;
transform: rotateX(90deg) translateX(-80px) translateY(-80px) translateZ(-104px);
}
.floor {
width: 480px;
height: 10px;
position: absolute;
top: 230px;
left: 0px;
transform-style: preserve-3d;
transform: translateZ(0px);
}
.floor .face, .floor .side, .floor .depth {
position: absolute;
top: 0;
left: 0;
transform-origin: top left;
transform-style: preserve-3d;
}
.floor .face:before, .floor .face:after, .floor .side:before, .floor .side:after, .floor .depth:before, .floor .depth:after {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
}
.floor .depth:before {
background-color: #dfa748;
}
.floor .depth:after {
background-color: #a4721d;
}
.floor .side:before, .floor .face:before {
background-color: #db9d32;
}
.floor .side:after, .floor .face:after {
background-color: #b98121;
}
.floor .face {
width: 480px;
height: 10px;
transform: translateZ(240px);
}
.floor .face:after {
transform: rotateY(180deg) translateZ(480px);
}
.floor .side {
width: 480px;
height: 10px;
transform: rotateY(90deg) translateX(-240px);
}
.floor .side:after {
transform: translateZ(480px);
}
.floor .depth {
width: 480px;
height: 480px;
transform-origin: top center;
transform: rotateX(90deg) translateY(-240px);
}
.floor .depth:after {
content: "";
transform: rotateX(180deg) translateZ(10px);
}
.table-surface {
width: 180px;
height: 10px;
position: absolute;
top: 180px;
left: 150px;
transform-style: preserve-3d;
transform: translateZ(50px);
}
.table-surface .face, .table-surface .side, .table-surface .depth {
position: absolute;
top: 0;
left: 0;
transform-origin: top left;
transform-style: preserve-3d;
}
.table-surface .face:before, .table-surface .face:after, .table-surface .side:before, .table-surface .side:after, .table-surface .depth:before, .table-surface .depth:after {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
}
.table-surface .depth:before {
background-color: #272727;
}
.table-surface .depth:after {
background-color: black;
}
.table-surface .side:before, .table-surface .face:before {
background-color: #1a1a1a;
}
.table-surface .side:after, .table-surface .face:after {
background-color: #010101;
}
.table-surface .face {
width: 180px;
height: 10px;
transform: translateZ(60px);
}
.table-surface .face:after {
transform: rotateY(180deg) translateZ(120px);
}
.table-surface .side {
width: 120px;
height: 10px;
transform: rotateY(90deg) translateX(-60px);
}
.table-surface .side:after {
transform: translateZ(180px);
}
.table-surface .depth {
width: 180px;
height: 120px;
transform-origin: top center;
transform: rotateX(90deg) translateY(-60px);
}
.table-surface .depth:after {
content: "";
transform: rotateX(180deg) translateZ(10px);
}
.table-foot-1 {
width: 10px;
height: 40px;
position: absolute;
top: 190px;
left: 155px;
transform-style: preserve-3d;
transform: translateZ(0px);
}
.table-foot-1 .face, .table-foot-1 .side, .table-foot-1 .depth {
position: absolute;
top: 0;
left: 0;
transform-origin: top left;
transform-style: preserve-3d;
}
.table-foot-1 .face:before, .table-foot-1 .face:after, .table-foot-1 .side:before, .table-foot-1 .side:after, .table-foot-1 .depth:before, .table-foot-1 .depth:after {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
}
.table-foot-1 .depth:before {
background-color: #a46200;
}
.table-foot-1 .depth:after {
background-color: #3e2500;
}
.table-foot-1 .side:before, .table-foot-1 .face:before {
background-color: #8a5300;
}
.table-foot-1 .side:after, .table-foot-1 .face:after {
background-color: #573400;
}
.table-foot-1 .face {
width: 10px;
height: 40px;
transform: translateZ(5px);
}
.table-foot-1 .face:after {
transform: rotateY(180deg) translateZ(10px);
}
.table-foot-1 .side {
width: 10px;
height: 40px;
transform: rotateY(90deg) translateX(-5px);
}
.table-foot-1 .side:after {
transform: translateZ(10px);
}
.table-foot-1 .depth {
width: 10px;
height: 10px;
transform-origin: top center;
transform: rotateX(90deg) translateY(-5px);
}
.table-foot-1 .depth:after {
content: "";
transform: rotateX(180deg) translateZ(40px);
}
.table-foot-2 {
width: 10px;
height: 40px;
position: absolute;
top: 190px;
left: 315px;
transform-style: preserve-3d;
transform: translateZ(0px);
}
.table-foot-2 .face, .table-foot-2 .side, .table-foot-2 .depth {
position: absolute;
top: 0;
left: 0;
transform-origin: top left;
transform-style: preserve-3d;
}
.table-foot-2 .face:before, .table-foot-2 .face:after, .table-foot-2 .side:before, .table-foot-2 .side:after, .table-foot-2 .depth:before, .table-foot-2 .depth:after {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
}
.table-foot-2 .depth:before {
background-color: #a46200;
}
.table-foot-2 .depth:after {
background-color: #3e2500;
}
.table-foot-2 .side:before, .table-foot-2 .face:before {
background-color: #8a5300;
}
.table-foot-2 .side:after, .table-foot-2 .face:after {
background-color: #573400;
}
.table-foot-2 .face {
width: 10px;
height: 40px;
transform: translateZ(5px);
}
.table-foot-2 .face:after {
transform: rotateY(180deg) translateZ(10px);
}
.table-foot-2 .side {
width: 10px;
height: 40px;
transform: rotateY(90deg) translateX(-5px);
}
.table-foot-2 .side:after {
transform: translateZ(10px);
}
.table-foot-2 .depth {
width: 10px;
height: 10px;
transform-origin: top center;
transform: rotateX(90deg) translateY(-5px);
}
.table-foot-2 .depth:after {
content: "";
transform: rotateX(180deg) translateZ(40px);
}
.table-foot-3 {
width: 10px;
height: 40px;
position: absolute;
top: 190px;
left: 155px;
transform-style: preserve-3d;
transform: translateZ(100px);
}
.table-foot-3 .face, .table-foot-3 .side, .table-foot-3 .depth {
position: absolute;
top: 0;
left: 0;
transform-origin: top left;
transform-style: preserve-3d;
}
.table-foot-3 .face:before, .table-foot-3 .face:after, .table-foot-3 .side:before, .table-foot-3 .side:after, .table-foot-3 .depth:before, .table-foot-3 .depth:after {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
}
.table-foot-3 .depth:before {
background-color: #a46200;
}
.table-foot-3 .depth:after {
background-color: #3e2500;
}
.table-foot-3 .side:before, .table-foot-3 .face:before {
background-color: #8a5300;
}
.table-foot-3 .side:after, .table-foot-3 .face:after {
background-color: #573400;
}
.table-foot-3 .face {
width: 10px;
height: 40px;
transform: translateZ(5px);
}
.table-foot-3 .face:after {
transform: rotateY(180deg) translateZ(10px);
}
.table-foot-3 .side {
width: 10px;
height: 40px;
transform: rotateY(90deg) translateX(-5px);
}
.table-foot-3 .side:after {
transform: translateZ(10px);
}
.table-foot-3 .depth {
width: 10px;
height: 10px;
transform-origin: top center;
transform: rotateX(90deg) translateY(-5px);
}
.table-foot-3 .depth:after {
content: "";
transform: rotateX(180deg) translateZ(40px);
}
.table-foot-4 {
width: 10px;
height: 40px;
position: absolute;
top: 190px;
left: 315px;
transform-style: preserve-3d;
transform: translateZ(100px);
}
.table-foot-4 .face, .table-foot-4 .side, .table-foot-4 .depth {
position: absolute;
top: 0;
left: 0;
transform-origin: top left;
transform-style: preserve-3d;
}
.table-foot-4 .face:before, .table-foot-4 .face:after, .table-foot-4 .side:before, .table-foot-4 .side:after, .table-foot-4 .depth:before, .table-foot-4 .depth:after {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
}
.table-foot-4 .depth:before {
background-color: #a46200;
}
.table-foot-4 .depth:after {
background-color: #3e2500;
}
.table-foot-4 .side:before, .table-foot-4 .face:before {
background-color: #8a5300;
}
.table-foot-4 .side:after, .table-foot-4 .face:after {
background-color: #573400;
}
.table-foot-4 .face {
width: 10px;
height: 40px;
transform: translateZ(5px);
}
.table-foot-4 .face:after {
transform: rotateY(180deg) translateZ(10px);
}
.table-foot-4 .side {
width: 10px;
height: 40px;
transform: rotateY(90deg) translateX(-5px);
}
.table-foot-4 .side:after {
transform: translateZ(10px);
}
.table-foot-4 .depth {
width: 10px;
height: 10px;
transform-origin: top center;
transform: rotateX(90deg) translateY(-5px);
}
.table-foot-4 .depth:after {
content: "";
transform: rotateX(180deg) translateZ(40px);
}
.sofa-cushion-1 {
width: 104px;
height: 70px;
position: absolute;
top: 110px;
left: 135px;
transform-style: preserve-3d;
transform: translateZ(-130px);
}
.sofa-cushion-1 .face, .sofa-cushion-1 .side, .sofa-cushion-1 .depth {
position: absolute;
top: 0;
left: 0;
transform-origin: top left;
transform-style: preserve-3d;
}
.sofa-cushion-1 .face:before, .sofa-cushion-1 .face:after, .sofa-cushion-1 .side:before, .sofa-cushion-1 .side:after, .sofa-cushion-1 .depth:before, .sofa-cushion-1 .depth:after {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
}
.sofa-cushion-1 .depth:before {
background-color: #d6dfeb;
}
.sofa-cushion-1 .depth:after {
background-color: #91aaca;
}
.sofa-cushion-1 .side:before, .sofa-cushion-1 .face:before {
background-color: #c5d2e3;
}
.sofa-cushion-1 .side:after, .sofa-cushion-1 .face:after {
background-color: #a3b7d2;
}
.sofa-cushion-1 .face {
width: 104px;
height: 70px;
transform: translateZ(10px);
}
.sofa-cushion-1 .face:after {
transform: rotateY(180deg) translateZ(20px);
}
.sofa-cushion-1 .side {
width: 20px;
height: 70px;
transform: rotateY(90deg) translateX(-10px);
}
.sofa-cushion-1 .side:after {
transform: translateZ(104px);
}
.sofa-cushion-1 .depth {
width: 104px;
height: 20px;
transform-origin: top center;
transform: rotateX(90deg) translateY(-10px);
}
.sofa-cushion-1 .depth:after {
content: "";
transform: rotateX(180deg) translateZ(70px);
}
.sofa-cushion-2 {
width: 104px;
height: 70px;
position: absolute;
top: 110px;
left: 241px;
transform-style: preserve-3d;
transform: translateZ(-130px);
}
.sofa-cushion-2 .face, .sofa-cushion-2 .side, .sofa-cushion-2 .depth {
position: absolute;
top: 0;
left: 0;
transform-origin: top left;
transform-style: preserve-3d;
}
.sofa-cushion-2 .face:before, .sofa-cushion-2 .face:after, .sofa-cushion-2 .side:before, .sofa-cushion-2 .side:after, .sofa-cushion-2 .depth:before, .sofa-cushion-2 .depth:after {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
}
.sofa-cushion-2 .depth:before {
background-color: #d6dfeb;
}
.sofa-cushion-2 .depth:after {
background-color: #91aaca;
}
.sofa-cushion-2 .side:before, .sofa-cushion-2 .face:before {
background-color: #c5d2e3;
}
.sofa-cushion-2 .side:after, .sofa-cushion-2 .face:after {
background-color: #a3b7d2;
}
.sofa-cushion-2 .face {
width: 104px;
height: 70px;
transform: translateZ(10px);
}
.sofa-cushion-2 .face:after {
transform: rotateY(180deg) translateZ(20px);
}
.sofa-cushion-2 .side {
width: 20px;
height: 70px;
transform: rotateY(90deg) translateX(-10px);
}
.sofa-cushion-2 .side:after {
transform: translateZ(104px);
}
.sofa-cushion-2 .depth {
width: 104px;
height: 20px;
transform-origin: top center;
transform: rotateX(90deg) translateY(-10px);
}
.sofa-cushion-2 .depth:after {
content: "";
transform: rotateX(180deg) translateZ(70px);
}
.sofa-cushion-3 {
width: 104px;
height: 20px;
position: absolute;
top: 180px;
left: 135px;
transform-style: preserve-3d;
transform: translateZ(-100px);
}
.sofa-cushion-3 .face, .sofa-cushion-3 .side, .sofa-cushion-3 .depth {
position: absolute;
top: 0;
left: 0;
transform-origin: top left;
transform-style: preserve-3d;
}
.sofa-cushion-3 .face:before, .sofa-cushion-3 .face:after, .sofa-cushion-3 .side:before, .sofa-cushion-3 .side:after, .sofa-cushion-3 .depth:before, .sofa-cushion-3 .depth:after {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
}
.sofa-cushion-3 .depth:before {
background-color: #d6dfeb;
}
.sofa-cushion-3 .depth:after {
background-color: #91aaca;
}
.sofa-cushion-3 .side:before, .sofa-cushion-3 .face:before {
background-color: #c5d2e3;
}
.sofa-cushion-3 .side:after, .sofa-cushion-3 .face:after {
background-color: #a3b7d2;
}
.sofa-cushion-3 .face {
width: 104px;
height: 20px;
transform: translateZ(42.5px);
}
.sofa-cushion-3 .face:after {
transform: rotateY(180deg) translateZ(85px);
}
.sofa-cushion-3 .side {
width: 85px;
height: 20px;
transform: rotateY(90deg) translateX(-42.5px);
}
.sofa-cushion-3 .side:after {
transform: translateZ(104px);
}
.sofa-cushion-3 .depth {
width: 104px;
height: 85px;
transform-origin: top center;
transform: rotateX(90deg) translateY(-42.5px);
}
.sofa-cushion-3 .depth:after {
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0