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 {
content: "";
transform: rotateX(180deg) translateZ(20px);
}
.sofa-cushion-4 {
width: 104px;
height: 20px;
position: absolute;
top: 180px;
left: 241px;
transform-style: preserve-3d;
transform: translateZ(-100px);
}
.sofa-cushion-4 .face, .sofa-cushion-4 .side, .sofa-cushion-4 .depth {
position: absolute;
top: 0;
left: 0;
transform-origin: top left;
transform-style: preserve-3d;
}
.sofa-cushion-4 .face:before, .sofa-cushion-4 .face:after, .sofa-cushion-4 .side:before, .sofa-cushion-4 .side:after, .sofa-cushion-4 .depth:before, .sofa-cushion-4 .depth:after {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
}
.sofa-cushion-4 .depth:before {
background-color: #d6dfeb;
}
.sofa-cushion-4 .depth:after {
background-color: #91aaca;
}
.sofa-cushion-4 .side:before, .sofa-cushion-4 .face:before {
background-color: #c5d2e3;
}
.sofa-cushion-4 .side:after, .sofa-cushion-4 .face:after {
background-color: #a3b7d2;
}
.sofa-cushion-4 .face {
width: 104px;
height: 20px;
transform: translateZ(42.5px);
}
.sofa-cushion-4 .face:after {
transform: rotateY(180deg) translateZ(85px);
}
.sofa-cushion-4 .side {
width: 85px;
height: 20px;
transform: rotateY(90deg) translateX(-42.5px);
}
.sofa-cushion-4 .side:after {
transform: translateZ(104px);
}
.sofa-cushion-4 .depth {
width: 104px;
height: 85px;
transform-origin: top center;
transform: rotateX(90deg) translateY(-42.5px);
}
.sofa-cushion-4 .depth:after {
content: "";
transform: rotateX(180deg) translateZ(20px);
}
.sofa-surface {
width: 230px;
height: 10px;
position: absolute;
top: 200px;
left: 125px;
transform-style: preserve-3d;
transform: translateZ(-105px);
}
.sofa-surface .face, .sofa-surface .side, .sofa-surface .depth {
position: absolute;
top: 0;
left: 0;
transform-origin: top left;
transform-style: preserve-3d;
}
.sofa-surface .face:before, .sofa-surface .face:after, .sofa-surface .side:before, .sofa-surface .side:after, .sofa-surface .depth:before, .sofa-surface .depth:after {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
}
.sofa-surface .depth:before {
background-color: #783e00;
}
.sofa-surface .depth:after {
background-color: #120900;
}
.sofa-surface .side:before, .sofa-surface .face:before {
background-color: #5e3100;
}
.sofa-surface .side:after, .sofa-surface .face:after {
background-color: #2b1600;
}
.sofa-surface .face {
width: 230px;
height: 10px;
transform: translateZ(45px);
}
.sofa-surface .face:after {
transform: rotateY(180deg) translateZ(90px);
}
.sofa-surface .side {
width: 90px;
height: 10px;
transform: rotateY(90deg) translateX(-45px);
}
.sofa-surface .side:after {
transform: translateZ(230px);
}
.sofa-surface .depth {
width: 230px;
height: 90px;
transform-origin: top center;
transform: rotateX(90deg) translateY(-45px);
}
.sofa-surface .depth:after {
content: "";
transform: rotateX(180deg) translateZ(10px);
}
.sofa-rear {
width: 230px;
height: 60px;
position: absolute;
top: 140px;
left: 125px;
transform-style: preserve-3d;
transform: translateZ(-145px);
}
.sofa-rear .face, .sofa-rear .side, .sofa-rear .depth {
position: absolute;
top: 0;
left: 0;
transform-origin: top left;
transform-style: preserve-3d;
}
.sofa-rear .face:before, .sofa-rear .face:after, .sofa-rear .side:before, .sofa-rear .side:after, .sofa-rear .depth:before, .sofa-rear .depth:after {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
}
.sofa-rear .depth:before {
background-color: #783e00;
}
.sofa-rear .depth:after {
background-color: #120900;
}
.sofa-rear .side:before, .sofa-rear .face:before {
background-color: #5e3100;
}
.sofa-rear .side:after, .sofa-rear .face:after {
background-color: #2b1600;
}
.sofa-rear .face {
width: 230px;
height: 60px;
transform: translateZ(5px);
}
.sofa-rear .face:after {
transform: rotateY(180deg) translateZ(10px);
}
.sofa-rear .side {
width: 10px;
height: 60px;
transform: rotateY(90deg) translateX(-5px);
}
.sofa-rear .side:after {
transform: translateZ(230px);
}
.sofa-rear .depth {
width: 230px;
height: 10px;
transform-origin: top center;
transform: rotateX(90deg) translateY(-5px);
}
.sofa-rear .depth:after {
content: "";
transform: rotateX(180deg) translateZ(60px);
}
.sofa-foot-1 {
width: 10px;
height: 70px;
position: absolute;
top: 160px;
left: 125px;
transform-style: preserve-3d;
transform: translateZ(-105px);
}
.sofa-foot-1 .face, .sofa-foot-1 .side, .sofa-foot-1 .depth {
position: absolute;
top: 0;
left: 0;
transform-origin: top left;
transform-style: preserve-3d;
}
.sofa-foot-1 .face:before, .sofa-foot-1 .face:after, .sofa-foot-1 .side:before, .sofa-foot-1 .side:after, .sofa-foot-1 .depth:before, .sofa-foot-1 .depth:after {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
}
.sofa-foot-1 .depth:before {
background-color: #783e00;
}
.sofa-foot-1 .depth:after {
background-color: #120900;
}
.sofa-foot-1 .side:before, .sofa-foot-1 .face:before {
background-color: #5e3100;
}
.sofa-foot-1 .side:after, .sofa-foot-1 .face:after {
background-color: #2b1600;
}
.sofa-foot-1 .face {
width: 10px;
height: 70px;
transform: translateZ(45px);
}
.sofa-foot-1 .face:after {
transform: rotateY(180deg) translateZ(90px);
}
.sofa-foot-1 .side {
width: 90px;
height: 70px;
transform: rotateY(90deg) translateX(-45px);
}
.sofa-foot-1 .side:after {
transform: translateZ(10px);
}
.sofa-foot-1 .depth {
width: 10px;
height: 90px;
transform-origin: top center;
transform: rotateX(90deg) translateY(-45px);
}
.sofa-foot-1 .depth:after {
content: "";
transform: rotateX(180deg) translateZ(70px);
}
.sofa-foot-2 {
width: 10px;
height: 70px;
position: absolute;
top: 160px;
left: 345px;
transform-style: preserve-3d;
transform: translateZ(-105px);
}
.sofa-foot-2 .face, .sofa-foot-2 .side, .sofa-foot-2 .depth {
position: absolute;
top: 0;
left: 0;
transform-origin: top left;
transform-style: preserve-3d;
}
.sofa-foot-2 .face:before, .sofa-foot-2 .face:after, .sofa-foot-2 .side:before, .sofa-foot-2 .side:after, .sofa-foot-2 .depth:before, .sofa-foot-2 .depth:after {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
}
.sofa-foot-2 .depth:before {
background-color: #783e00;
}
.sofa-foot-2 .depth:after {
background-color: #120900;
}
.sofa-foot-2 .side:before, .sofa-foot-2 .face:before {
background-color: #5e3100;
}
.sofa-foot-2 .side:after, .sofa-foot-2 .face:after {
background-color: #2b1600;
}
.sofa-foot-2 .face {
width: 10px;
height: 70px;
transform: translateZ(45px);
}
.sofa-foot-2 .face:after {
transform: rotateY(180deg) translateZ(90px);
}
.sofa-foot-2 .side {
width: 90px;
height: 70px;
transform: rotateY(90deg) translateX(-45px);
}
.sofa-foot-2 .side:after {
transform: translateZ(10px);
}
.sofa-foot-2 .depth {
width: 10px;
height: 90px;
transform-origin: top center;
transform: rotateX(90deg) translateY(-45px);
}
.sofa-foot-2 .depth:after {
content: "";
transform: rotateX(180deg) translateZ(70px);
}
.sofa-pillow {
width: 60px;.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0