css布局实现城市高楼大厦俯视三维模型效果代码
代码语言：html
所属分类：三维
代码描述：css布局实现城市高楼大厦俯视三维模型效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
background: #e1e6f0;
height: 100vh;
overflow: hidden;
display: flex;
perspective: 1000px;
}
.panels {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform: translateY(40px);
}
.camera {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.camera.-x {
transform: rotateX(-20deg) scale3d(0.8, 0.8, 0.8);
}
.camera.-y {
transform: rotateY(-45deg);
-webkit-animation: rotateY 30s linear infinite;
animation: rotateY 30s linear infinite;
}
@-webkit-keyframes rotateY {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
@keyframes rotateY {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
.ground {
position: absolute;
top: calc(50% - 350px);
left: calc(50% - 350px);
width: 700px;
height: 700px;
background: #cdd2c8;
border-radius: 100%;
transform: rotateX(90deg) translateZ(-40px);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
border: 16px solid #fff;
box-sizing: border-box;
}
.ground .roads {
filter: drop-shadow(0 0 1px #888);
}
.ground .road {
position: absolute;
top: 50%;
left: 50%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.ground .road:nth-child(1) {
width: 497px;
height: 963px;
border: 33px solid #eee;
transform: translate(-50%, -50%) translate(52px, 210px);
border-radius: 95px;
}
.ground .road:nth-child(2) {
width: 692px;
height: 417px;
border: 31px solid #eee;
transform: translate(-50%, -50%) translate(-193px, -243px);
border-radius: 87px;
}
.ground .road:nth-child(3) {
width: 956px;
height: 307px;
border: 50px solid #eee;
transform: translate(-50%, -50%) translate(463px, 9px);
border-radius: 31px;
}
.ground .road:nth-child(4) {
width: 228px;
height: 134px;
border: 58px solid #eee;
transform: translate(-50%, -50%) translate(225px, 150px);
border-radius: 95px;
}
.ground .road:nth-child(5) {
width: 437px;
height: 837px;
border: 58px solid #eee;
transform: translate(-50%, -50%) translate(-306px, -317px);
border-radius: 87px;
}
.ground .road:nth-child(6) {
width: 649px;
height: 1034px;
border: 60px solid #eee;
transform: translate(-50%, -50%) translate(-380px, 488px);
border-radius: 97px;
}
.ground .road:nth-child(7) {
width: 926px;
height: 465px;
border: 57px solid #eee;
transform: translate(-50%, -50%) translate(139px, 88px);
border-radius: 30px;
}
.ground .road:nth-child(8) {
width: 820px;
height: 561px;
border: 57px solid #eee;
transform: translate(-50%, -50%) translate(279px, 314px);
border-radius: 30px;
}
.ground .road:nth-child(9) {
width: 945px;
height: 751px;
border: 32px solid #eee;
transform: translate(-50%, -50%) translate(163px, -381px);
border-radius: 25px;
}
.ground .road:nth-child(10) {
width: 867px;
height: 238px;
border: 37px solid #eee;
transform: translate(-50%, -50%) translate(32px, -330px);
border-radius: 40px;
}
.panel {
position: absolute;
top: 50%;
left: 50%;
transform-style: preserve-3d;
}
.panel:nth-child(1) {
transform: translateX(47px) translateZ(46px) translateY(-103px);
}
.panel:nth-child(1) .face {
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.panel:nth-child(1) .face.-front {
width: 99px;
height: 206px;
transform: translate(-50%, -50%) rotateY(0deg) translateZ(46.5px);
background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(1) .face.-left {
width: 93px;
height: 206px;
transform: translate(-50%, -50%) rotateY(90deg) translateZ(49.5px);
background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(1) .face.-top {
width: 99px;
height: 93px;
transform: translate(-50%, -50%) rotateX(90deg) translateZ(103px);
background: #96918c;
}
.panel:nth-child(1) .face.-bottom {
width: 99px;
height: 93px;
transform: translate(-50%, -50%) rotateX(-90deg) translateZ(103px);
background: #6e6964;
}
.panel:nth-child(1) .face.-right {
width: 93px;
height: 206px;
transform: translate(-50%, -50%) rotateY(-90deg) translateZ(49.5px);
background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(1) .face.-back {
width: 99px;
height: 206px;
transform: translate(-50%, -50%) rotateY(180deg) translateZ(46.5px);
background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(2) {
transform: translateX(117px) translateZ(129px) translateY(-85.5px);
}
.panel:nth-child(2) .face {
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.panel:nth-child(2) .face.-front {
width: 98px;
height: 171px;
transform: translate(-50%, -50%) rotateY(0deg) translateZ(42px);
background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(2) .face.-left {
width: 84px;
height: 171px;
transform: translate(-50%, -50%) rotateY(90deg) translateZ(49px);
background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(2) .face.-top {
width: 98px;
height: 84px;
transform: translate(-50%, -50%) rotateX(90deg) translateZ(85.5px);
background: #96918c;
}
.panel:nth-child(2) .face.-bottom {
width: 98px;
height: 84px;
transform: translate(-50%, -50%) rotateX(-90deg) translateZ(85.5px);
background: #6e6964;
}
.panel:nth-child(2) .face.-right {
width: 84px;
height: 171px;
transform: translate(-50%, -50%) rotateY(-90deg) translateZ(49px);
background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(2) .face.-back {
width: 98px;
height: 171px;
transform: translate(-50%, -50%) rotateY(180deg) translateZ(42px);
background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(3) {
transform: translateX(146px) translateZ(-61px) translateY(-65px);
}
.panel:nth-child(3) .face {
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.panel:nth-child(3) .face.-front {
width: 40px;
height: 130px;
transform: translate(-50%, -50%) rotateY(0deg) translateZ(38.5px);
background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(3) .face.-left {
width: 77px;
height: 130px;
transform: translate(-50%, -50%) rotateY(90deg) translateZ(20px);
background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(3) .face.-top {
width: 40px;
height: 77px;
transform: translate(-50%, -50%) rotateX(90deg) translateZ(65px);
background: #96918c;
}
.panel:nth-child(3) .face.-bottom {
width: 40px;
height: 77px;
transform: translate(-50%, -50%) rotateX(-90deg) translateZ(65px);
background: #6e6964;
}
.panel:nth-child(3) .face.-right {
width: 77px;
height: 130px;
transform: translate(-50%, -50%) rotateY(-90deg) translateZ(20px);
background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(3) .face.-back {
width: 40px;
height: 130px;
transform: translate(-50%, -50%) rotateY(180deg) translateZ(38.5px);
background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(4) {
transform: translateX(-24px) translateZ(-40px) translateY(-95.5px);
}
.panel:nth-child(4) .face {
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.panel:nth-child(4) .face.-front {
width: 91px;
height: 191px;
transform: translate(-50%, -50%) rotateY(0deg) translateZ(35px);
background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(4) .face.-left {
width: 70px;
height: 191px;
transform: translate(-50%, -50%) rotateY(90deg) translateZ(45.5px);
background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(4) .face.-top {
width: 91px;
height: 70px;
transform: translate(-50%, -50%) rotateX(90deg) translateZ(95.5px);
background: #96918c;
}
.panel:nth-child(4) .face.-bottom {
width: 91px;
height: 70px;
transform: translate(-50%, -50%) rotateX(-90deg) translateZ(95.5px);
background: #6e6964;
}
.panel:nth-child(4) .face.-right {
width: 70px;
height: 191px;
transform: translate(-50%, -50%) rotateY(-90deg) translateZ(45.5px);
background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(4) .face.-back {
width: 91px;
height: 191px;
transform: translate(-50%, -50%) rotateY(180deg) translateZ(35px);
background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(5) {
transform: translateX(-42px) translateZ(27px) translateY(-10.5px);
}
.panel:nth-child(5) .face {
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.panel:nth-child(5) .face.-front {
width: 42px;
height: 21px;
transform: translate(-50%, -50%) rotateY(0deg) translateZ(27px);
background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(5) .face.-left {
width: 54px;
height: 21px;
transform: translate(-50%, -50%) rotateY(90deg) translateZ(21px);
background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(5) .face.-top {
width: 42px;
height: 54px;
transform: translate(-50%, -50%) rotateX(90deg) translateZ(10.5px);
background: #96918c;
}
.panel:nth-child(5) .face.-bottom {
width: 42px;
height: 54px;
transform: translate(-50%, -50%) rotateX(-90deg) translateZ(10.5px);
background: #6e6964;
}
.panel:nth-child(5) .face.-right {
width: 54px;
height: 21px;
transform: translate(-50%, -50%) rotateY(-90deg) translateZ(21px);
background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(5) .face.-back {
width: 42px;
height: 21px;
transform: translate(-50%, -50%) rotateY(180deg) translateZ(27px);
background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(6) {
transform: translateX(48px) translateZ(-39px) translateY(-60.5px);
}
.panel:nth-child(6) .face {
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.panel:nth-child(6) .face.-front {
width: 101px;
height: 121px;
transform: translate(-50%, -50%) rotateY(0deg) translateZ(13px);
background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(6) .face.-left {
width: 26px;
height: 121px;
transform: translate(-50%, -50%) rotateY(90deg) translateZ(50.5px);
background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(6) .face.-top {
width: 101px;
height: 26px;
transform: translate(-50%, -50%) rotateX(90deg) translateZ(60.5px);
background: #96918c;
}
.panel:nth-child(6) .face.-bottom {
width: 101px;
height: 26px;
transform: translate(-50%, -50%) rotateX(-90deg) translateZ(60.5px);
background: #6e6964;
}
.panel:nth-child(6) .face.-right {
width: 26px;
height: 121px;
transform: translate(-50%, -50%) rotateY(-90deg) translateZ(50.5px);
background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(6) .face.-back {
width: 101px;
height: 121px;
transform: translate(-50%, -50%) rotateY(180deg) translateZ(13px);
background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(7) {
transform: translateX(-199px) translateZ(-161px) translateY(-107px);
}
.panel:nth-child(7) .face {
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.panel:nth-child(7) .face.-front {
width: 104px;
height: 214px;
transform: translate(-50%, -50%) rotateY(0deg) translateZ(22px);
background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(7) .face.-left {
width: 44px;
height: 214px;
transform: translate(-50%, -50%) rotateY(90deg) translateZ(52px);
background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(7) .face.-top {
width: 104px;
height: 44px;
transform: translate(-50%, -50%) rotateX(90deg) translateZ(107px);
background: #96918c;
}
.panel:nth-child(7) .face.-bottom {
width: 104px;
height: 44px;
transform: translate(-50%, -50%) rotateX(-90deg) translateZ(107px);
background: #6e6964;
}
.panel:nth-child(7) .face.-right {
width: 44px;
height: 214px;
transform: translate(-50%, -50%) rotateY(-90deg) translateZ(52px);
background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(7) .face.-back {
width: 104px;
height: 214px;
transform: translate(-50%, -50%) rotateY(180deg) translateZ(22px);
background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(8) {
transform: translateX(117px) translateZ(-196px) translateY(-14.5px);
}
.panel:nth-child(8) .face {
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.panel:nth-child(8) .face.-front {
width: 110px;
height: 29px;
transform: translate(-50%, -50%) rotateY(0deg) translateZ(37.5px);
background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(8) .face.-left {
width: 75px;
height: 29px;
transform: translate(-50%, -50%) rotateY(90deg) translateZ(55px);
background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(8) .face.-top {
width: 110px;
height: 75px;
transform: translate(-50%, -50%) rotateX(90deg) translateZ(14.5px);
background: #96918c;
}
.panel:nth-child(8) .face.-bottom {
width: 110px;
height: 75px;
transform: translate(-50%, -50%) rotateX(-90deg) translateZ(14.5px);
background: #6e6964;
}
.panel:nth-child(8) .face.-right {
width: 75px;
height: 29px;
transform: translate(-50%, -50%) rotateY(-90deg) translateZ(55px);
background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(8) .face.-back {
width: 110px;
height: 29px;
transform: translate(-50%, -50%) rotateY(180deg) translateZ(37.5px);
background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(9) {
transform: translateX(-160px) translateZ(76px) translateY(-14px);
}
.panel:nth-child(9) .face {
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.panel:nth-child(9) .face.-front {
width: 70px;
height: 28px;
transform: translate(-50%, -50%) rotateY(0deg) translateZ(34px);
background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(9) .face.-left {
width: 68px;
height: 28px;
transform: translate(-50%, -50%) rotateY(90deg) translateZ(35px);
background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(9) .face.-top {
width: 70px;
height: 68px;
transform: translate(-50%, -50%) rotateX(90deg) translateZ(14px);
background: #96918c;
}
.panel:nth-child(9) .face.-bottom {
width: 70px;
height: 68px;
transform: translate(-50%, -50%) rotateX(-90deg) translateZ(14px);
background: #6e6964;
}
.panel:nth-child(9) .face.-right {
width: 68px;
height: 28px;
transform: translate(-50%, -50%) rotateY(-90deg) translateZ(35px);
background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(9) .face.-back {
width: 70px;
height: 28px;
transform: translate(-50%, -50%) rotateY(180deg) translateZ(34px);
background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(10) {
transform: translateX(121px) translateZ(188px) translateY(-48px);
}
.panel:nth-child(10) .face {
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.panel:nth-child(10) .face.-front {
width: 81px;
height: 96px;
transform: translate(-50%, -50%) rotateY(0deg) translateZ(48px);
background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(10) .face.-left {
width: 96px;
height: 96px;
transform: translate(-50%, -50%) rotateY(90deg) translateZ(40.5px);
background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(10) .face.-top {
width: 81px;
height: 96px;
transform: translate(-50%, -50%) rotateX(90deg) translateZ(48px);
background: #96918c;
}
.panel:nth-child(10) .face.-bottom {
width: 81px;
height: 96px;
transform: translate(-50%, -50%) rotateX(-90deg) translateZ(48px);
background: #6e6964;
}
.panel:nth-child(10) .face.-right {
width: 96px;
height: 96px;
transform: translate(-50%, -50%) rotateY(-90deg) translateZ(40.5px);
background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(10) .face.-back {
width: 81px;
height: 96px;
transform: translate(-50%, -50%) rotateY(180deg) translateZ(48px);
background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(11) {
transform: translateX(-19px) translateZ(181px) translateY(-105px);
}
.panel:nth-child(11) .face {
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.panel:nth-child(11) .face.-front {
width: 67px;
height: 210px;
transform: translate(-50%, -50%) rotateY(0deg) translateZ(43px);
background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(11) .face.-left {
width: 86px;
height: 210px;
transform: translate(-50%, -50%) rotateY(90deg) translateZ(33.5px);
background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(11) .face.-top {
width: 67px;
height: 86px;
transform: translate(-50%, -50%) rotateX(90deg) translateZ(105px);
background: #96918c;
}
.panel:nth-child(11) .face.-bottom {
width: 67px;
height: 86px;
transform: translate(-50%, -50%) rotateX(-90deg) translateZ(105px);
background: #6e6964;
}
.panel:nth-child(11) .face.-right {
width: 86px;
height: 210px;
transform: translate(-50%, -50%) rotateY(-90deg) translateZ(33.5px);
background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(11) .face.-back {
width: 67px;
height: 210px;
transform: translate(-50%, -50%) rotateY(180deg) translateZ(43px);
background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(12) {
transform: translateX(-173px) translateZ(200px) translateY(-110px);
}
.panel:nth-child(12) .face {
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.panel:nth-child(12) .face.-front {
width: 62px;
height: 220px;
transform: translate(-50%, -50%) rotateY(0deg) translateZ(54px);
background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(12) .face.-left {
width: 108px;
height: 220px;
transform: translate(-50%, -50%) rotateY(90deg) translateZ(31px);
background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(12) .face.-top {
width: 62px;
height: 108px;
transform: translate(-50%, -50%) rotateX(90deg) translateZ(110px);
background: #96918c;
}
.panel:nth-child(12) .face.-bottom {
width: 62px;
height: 108px;
transform: translate(-50%, -50%) rotateX(-90deg) translateZ(110px);
background: #6e6964;
}
.panel:nth-child(12) .face.-right {
width: 108px;
height: 220px;
transform: translate(-50%, -50%) rotateY(-90deg) translateZ(31px);
background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(12) .face.-back {
width: 62px;
height: 220px;
transform: translate(-50%, -50%) rotateY(180deg) translateZ(54px);
background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(13) {
transform: translateX(200px) translateZ(-1px) translateY(-81px);
}
.panel:nth-child(13) .face {
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.panel:nth-child(13) .face.-front {
width: 47px;
height: 162px;
transform: translate(-50%, -50%) rotateY(0deg) translateZ(35px);
background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(13) .face.-left {
width: 70px;
height: 162px;
transform: translate(-50%, -50%) rotateY(90deg) translateZ(23.5px);
background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(13) .face.-top {
width: 47px;
height: 70px;
transform: translate(-50%, -50%) rotateX(90deg) translateZ(81px);
background: #96918c;
}
.panel:nth-child(13) .face.-bottom {
width: 47px;
height: 70px;
transform: translate(-50%, -50%) rotateX(-90deg) translateZ(81px);
background: #6e6964;
}
.panel:nth-child(13) .face.-right {
width: 70px;
height: 162px;
transform: translate(-50%, -50%) rotateY(-90deg) translateZ(23.5px);
background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(13) .face.-back {
width: 47px;
height: 162px;
transform: translate(-50%, -50%) rotateY(180deg) translateZ(35px);
background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(14) {
transform: translateX(-45px) translateZ(198px) translateY(-33px);
}
.panel:nth-child(14) .face {
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.panel:nth-child(14) .face.-front {
width: 96px;
height: 66px;
transform: translate(-50%, -50%) rotateY(0deg) translateZ(20.5px);
background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(14) .face.-left {
width: 41px;
height: 66px;
transform: translate(-50%, -50%) rotateY(90deg) translateZ(48px);
background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(14) .face.-top {
width: 96px;
height: 41px;
transform: translate(-50%, -50%) rotateX(90deg) translateZ(33px);
background: #96918c;
}
.panel:nth-child(14) .face.-bottom {
width: 96px;
height: 41px;
transform: translate(-50%, -50%) rotateX(-90deg) translateZ(33px);
background: #6e6964;
}
.panel:nth-child(14) .face.-right {
width: 41px;
height: 66px;
transform: translate(-50%, -50%) rotateY(-90deg) translateZ(48px);
background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(14) .face.-back {
width: 96px;
height: 66px;
transform: translate(-50%, -50%) rotateY(180deg) translateZ(20.5px);
background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(15) {
transform: translateX(160px) translateZ(-54px) translateY(-87.5px);
}
.panel:nth-child(15) .face {
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.panel:nth-child(15) .face.-front {
width: 55px;
height: 175px;
transform: translate(-50%, -50%) rotateY(0deg) translateZ(47.5px);
background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(15) .face.-left {
width: 95px;
height: 175px;
transform: translate(-50%, -50%) rotateY(90deg) translateZ(27.5px);
background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(15) .face.-top {
width: 55px;
height: 95px;
transform: translate(-50%, -50%) rotateX(90deg) translateZ(87.5px);
background: #96918c;
}
.panel:nth-child(15) .face.-bottom {
width: 55px;
height: 95px;
transform: translate(-50%, -50%) rotateX(-90deg) translateZ(87.5px);
background: #6e6964;
}
.panel:nth-child(15) .face.-right {
width: 95px;
height: 175px;
transform: translate(-50%, -50%) rotateY(-90deg) translateZ(27.5px);
background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(15) .face.-back {
width: 55px;
height: 175px;
transform: translate(-50%, -50%) rotateY(180deg) translateZ(47.5px);
background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(16) {
transform: translateX(-15px) translateZ(175px) translateY(-82px);
}
.panel:nth-child(16) .face {
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.panel:nth-child(16) .face.-front {
width: 106px;
height: 164px;
transform: translate(-50%, -50%) rotateY(0deg) translateZ(52.5px);
background: repeating-linear-gradient(90deg, #8c8782 0px, #8c8782 2px, rgba(140, 135, 130, 0) 2px, rgba(140, 135, 130, 0) 10px), repeating-linear-gradient(0deg, rgba(240, 240, 225, 0) 0px, rgba(240, 240, 225, 0) 10px, #f0f0e1 10px, #f0f0e1 15px), #8c8782;
}
.panel:nth-child(16) .face.-left {
width: 105px;
height: 164px;
transform: translate(-50%, -50%) rotateY(90deg) translateZ(53px);
background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(16) .face.-top {
width: 106px;
height: 105px;
transform: translate(-50%, -50%) rotateX(90deg) translateZ(82px);
background: #96918c;
}
.panel:nth-child(16) .face.-bottom {
width: 106px;
height: 105px;
transform: translate(-50%, -50%) rotateX(-90deg) translateZ(82px);
background: #6e6964;
}
.panel:nth-child(16) .face.-right {
width: 105px;
height: 164px;
transform: translate(-50%, -50%) rotateY(-90deg) translateZ(53px);
background: repeating-linear-gradient(90deg, #827d78 0px, #827d78 2px, rgba(130, 125, 120, 0) 2px, rgba(130, 125, 120, 0) 10px), repeating-linear-gradient(0deg, rgba(230, 230, 215, 0) 0px, rgba(230, 230, 215, 0) 10px, #e6e6d7 10px, #e6e6d7 15px), #827d78;
}
.panel:nth-child(16) .face.-back {
width: 106px;
height: 164px;
transform: translate(-50%, -50%) rotateY(180deg) translateZ(52.5px);
background: repeating-linear-gradient(90deg, #78736e 0px, #78736e 2px, rgba(120, 115, 110, 0) 2px, rgba(120, 115, 110, 0) 10px), repeating-linear-gradient(0deg, rgba(220, 220, 205, 0) 0px, rgba(220, 220, 205, 0) 10px, #dcdccd 10px, #dcdccd 15px), #78736e;
}
.panel:nth-child(17) {
transform: translateX(-46px) translateZ(-126px) translateY(-73px);
}
.panel:nth-child(17) .face {
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.panel:nth-child(17) .face.-front {
width: 84px;
height: 146px;
transform: transla.........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
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