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: translate(-50%, -50%) rotateY(0deg) translateZ(23.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(17) .face.-left { width: 47px; height: 146px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(42px); 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(17) .face.-top { width: 84px; height: 47px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(73px); background: #96918c; } .panel:nth-child(17) .face.-bottom { width: 84px; height: 47px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(73px); background: #6e6964; } .panel:nth-child(17) .face.-right { width: 47px; height: 146px; transform: translate(-50%, -50%) rotateY(-90deg) translateZ(42px); 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(17) .face.-back { width: 84px; height: 146px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(23.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(18) { transform: translateX(-128px) translateZ(131px) translateY(-37px); } .panel:nth-child(18) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(18) .face.-front { width: 50px; height: 74px; transform: translate(-50%, -50%) rotateY(0deg) translateZ(11.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(18) .face.-left { width: 23px; height: 74px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(25px); 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(18) .face.-top { width: 50px; height: 23px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(37px); background: #96918c; } .panel:nth-child(18) .face.-bottom { width: 50px; height: 23px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(37px); background: #6e6964; } .panel:nth-child(18) .face.-right { width: 23px; height: 74px; transform: translate(-50%, -50%) rotateY(-90deg) translateZ(25px); 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(18) .face.-back { width: 50px; height: 74px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(11.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(19) { transform: translateX(107px) translateZ(35px) translateY(-105px); } .panel:nth-child(19) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(19) .face.-front { width: 59px; height: 210px; transform: translate(-50%, -50%) rotateY(0deg) translateZ(13.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(19) .face.-left { width: 27px; height: 210px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(29.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(19) .face.-top { width: 59px; height: 27px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(105px); background: #96918c; } .panel:nth-child(19) .face.-bottom { width: 59px; height: 27px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(105px); background: #6e6964; } .panel:nth-child(19) .face.-right { width: 27px; height: 210px; transform: translate(-50%, -50%) rotateY(-90deg) translateZ(29.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(19) .face.-back { width: 59px; height: 210px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(13.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(20) { transform: translateX(66px) translateZ(-26px) translateY(-47px); } .panel:nth-child(20) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(20) .face.-front { width: 32px; height: 94px; 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(20) .face.-left { width: 95px; height: 94px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(16px); 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(20) .face.-top { width: 32px; height: 95px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(47px); background: #96918c; } .panel:nth-child(20) .face.-bottom { width: 32px; height: 95px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(47px); background: #6e6964; } .panel:nth-child(20) .face.-right { width: 95px; height: 94px; transform: translate(-50%, -50%) rotateY(-90deg) translateZ(16px); 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(20) .face.-back { width: 32px; height: 94px; 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(21) { transform: translateX(32px) translateZ(-10px) translateY(-104px); } .panel:nth-child(21) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(21) .face.-front { width: 115px; height: 208px; transform: translate(-50%, -50%) rotateY(0deg) translateZ(36.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(21) .face.-left { width: 73px; height: 208px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(57.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(21) .face.-top { width: 115px; height: 73px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(104px); background: #96918c; } .panel:nth-child(21) .face.-bottom { width: 115px; height: 73px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(104px); background: #6e6964; } .panel:nth-child(21) .face.-right { width: 73px; height: 208px; transform: translate(-50%, -50%) rotateY(-90deg) translateZ(57.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(21) .face.-back { width: 115px; height: 208px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(36.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(22) { transform: translateX(20px) translateZ(124px) translateY(-23.5px); } .panel:nth-child(22) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(22) .face.-front { width: 119px; height: 47px; 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(22) .face.-left { width: 77px; height: 47px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(59.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(22) .face.-top { width: 119px; height: 77px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(23.5px); background: #96918c; } .panel:nth-child(22) .face.-bottom { width: 119px; height: 77px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(23.5px); background: #6e6964; } .panel:nth-child(22) .face.-right { width: 77px; height: 47px; transform: translate(-50%, -50%) rotateY(-90deg) translateZ(59.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(22) .face.-back { width: 119px; height: 47px; 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(23) { transform: translateX(-106px) translateZ(-90px) translateY(-88.5px); } .panel:nth-child(23) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(23) .face.-front { width: 38px; height: 177px; transform: translate(-50%, -50%) rotateY(0deg) translateZ(55px); 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(23) .face.-left { width: 110px; height: 177px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(19px); 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(23) .face.-top { width: 38px; height: 110px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(88.5px); background: #96918c; } .panel:nth-child(23) .face.-bottom { width: 38px; height: 110px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(88.5px); background: #6e6964; } .panel:nth-child(23) .face.-right { width: 110px; height: 177px; transform: translate(-50%, -50%) rotateY(-90deg) translateZ(19px); 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(23) .face.-back { width: 38px; height: 177px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(55px); 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(24) { transform: translateX(87px) translateZ(-198px) translateY(-52px); } .panel:nth-child(24) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(24) .face.-front { width: 86px; height: 104px; transform: translate(-50%, -50%) rotateY(0deg) translateZ(25px); 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(24) .face.-left { width: 50px; height: 104px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(43px); 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(24) .face.-top { width: 86px; height: 50px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(52px); background: #96918c; } .panel:nth-child(24) .face.-bottom { width: 86px; height: 50px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(52px); background: #6e6964; } .panel:nth-child(24) .face.-right { width: 50px; height: 104px; transform: translate(-50%, -50%) rotateY(-90deg) translateZ(43px); 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(24) .face.-back { width: 86px; height: 104px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(25px); 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(25) { transform: translateX(-91px) translateZ(39px) translateY(-29.5px); } .panel:nth-child(25) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(25) .face.-front { width: 26px; height: 59px; transform: translate(-50%, -50%) rotateY(0deg) translateZ(22.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(25) .face.-left { width: 45px; height: 59px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(13px); 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(25) .face.-top { width: 26px; height: 45px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(29.5px); background: #96918c; } .panel:nth-child(25) .face.-bottom { width: 26px; height: 45px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(29.5px); background: #6e6964; } .panel:nth-child(25) .face.-right { width: 45px; height: 59px; transform: translate(-50%, -50%) rotateY(-90deg) translateZ(13px); 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(25) .face.-back { width: 26px; height: 59px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(22.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(26) { transform: translateX(-72px) translateZ(48px) translateY(-91px); } .panel:nth-child(26) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(26) .face.-front { width: 46px; height: 182px; transform: translate(-50%, -50%) rotateY(0deg) translateZ(28px); 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(26) .face.-left { width: 56px; height: 182px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(23px); 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(26) .face.-top { width: 46px; height: 56px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(91px); background: #96918c; } .panel:nth-child(26) .face.-bottom { width: 46px; height: 56px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(91px); background: #6e6964; } .panel:nth-child(26) .face.-right { width: 56px; height: 182px; transform: translate(-50%, -50%) rotateY(-90deg) translateZ(23px); 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(26) .face.-back { width: 46px; height: 182px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(28px); 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(27) { transform: translateX(157px) translateZ(109px) translateY(-50.5px); } .panel:nth-child(27) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(27) .face.-front { width: 34px; height: 101px; transform: translate(-50%, -50%) rotateY(0deg) translateZ(28.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(27) .face.-left { width: 57px; height: 101px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(17px); 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(27) .face.-top { width: 34px; height: 57px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(50.5px); background: #96918c; } .panel:nth-child(27) .face.-bottom { width: 34px; height: 57px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(50.5px); background: #6e6964; } .panel:nth-child(27) .face.-right { width: 57px; height: 101px; transform: translate(-50%, -50%) rotateY(-90deg) translateZ(17px); 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(27) .face.-back { width: 34px; height: 101px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(28.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(28) { transform: translateX(-177px) translateZ(-125px) translateY(-109.5px); } .panel:nth-child(28) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(28) .face.-front { width: 72px; height: 219px; transform: translate(-50%, -50%) rotateY(0deg) translateZ(21.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(28) .face.-left { width: 43px; height: 219px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(36px); 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(28) .face.-top { width: 72px; height: 43px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(109.5px); background: #96918c; } .panel:nth-child(28) .face.-bottom { width: 72px; height: 43px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(109.5px); background: #6e6964; } .panel:nth-child(28) .face.-right { width: 43px; height: 219px; transform: translate(-50%, -50%) rotateY(-90deg) translateZ(36px); 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(28) .face.-back { width: 72px; height: 219px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(21.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(29) { transform: translateX(67px) translateZ(-194px) translateY(-53.5px); } .panel:nth-child(29) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(29) .face.-front { width: 37px; height: 107px; transform: translate(-50%, -50%) rotateY(0deg) translateZ(57.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(29) .face.-left { width: 115px; height: 107px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(18.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(29) .face.-top { width: 37px; height: 115px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(53.5px); background: #96918c; } .panel:nth-child(29) .face.-bottom { width: 37px; height: 115px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(53.5px); background: #6e6964; } .panel:nth-child(29) .face.-right { width: 115px; height: 107px; transform: translate(-50%, -50%) rotateY(-90deg) translateZ(18.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(29) .face.-back { width: 37px; height: 107px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(57.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(30) { transform: translateX(48px) translateZ(-124px) translateY(-27.5px); } .panel:nth-child(30) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(30) .face.-front { width: 93px; height: 55px; transform: translate(-50%, -50%) rotateY(0deg) translateZ(22.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(30) .face.-left { width: 45px; height: 55px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(46.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(30) .face.-top { width: 93px; height: 45px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(27.5px); background: #96918c; } .panel:nth-child(30) .face.-bottom { width: 93px; height: 45px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(27.5px); background: #6e6964; } .panel:nth-child(30) .face.-right { width: 45px; height: 55px; transform: translate(-50%, -50%) rotateY(-90deg) translateZ(46.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(30) .face.-back { width: 93px; height: 55px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(22.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(31) { transform: translateX(-19px) translateZ(103px) translateY(-66.5px); } .panel:nth-child(31) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(31) .face.-front { width: 42px; height: 133px; transform: translate(-50%, -50%) rotateY(0deg) translateZ(15.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(31) .face.-left { width: 31px; height: 133px; 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(31) .face.-top { width: 42px; height: 31px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(66.5px); background: #96918c; } .panel:nth-child(31) .face.-bottom { width: 42px; height: 31px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(66.5px); background: #6e6964; } .panel:nth-child(31) .face.-right { width: 31px; height: 133px; 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(31) .face.-back { width: 42px; height: 133px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(15.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(32) { transform: translateX(157px) translateZ(-51px) translateY(-72px); } .panel:nth-child(32) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(32) .face.-front { width: 115px; height: 144px; transform: translate(-50%, -50%) rotateY(0deg) translateZ(53.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(32) .face.-left { width: 107px; height: 144px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(57.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(32) .face.-top { width: 115px; height: 107px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(72px); background: #96918c; } .panel:nth-child(32) .face.-bottom { width: 115px; height: 107px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(72px); background: #6e6964; } .panel:nth-child(32) .face.-right { width: 107px; height: 144px; transform: translate(-50%, -50%) rotateY(-90deg) translateZ(57.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(32) .face.-back { width: 115px; height: 144px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(53.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(33) { transform: translateX(3px) translateZ(-154px) translateY(-69px); } .panel:nth-child(33) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(33) .face.-front { width: 28px; height: 138px; transform: translate(-50%, -50%) rotateY(0deg) translateZ(14.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(33) .face.-left { width: 29px; height: 138px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(14px); 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(33) .face.-top { width: 28px; height: 29px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(69px); background: #96918c; } .panel:nth-child(33) .face.-bottom { width: 28px; height: 29px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(69px); background: #6e6964; } .panel:nth-child(33) .face.-right { width: 29px; height: 138px; transform: translate(-50%, -50%) rotateY(-90deg) translateZ(14px); 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(33) .face.-back { width: 28px; height: 138px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(14.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(34) { transform: translateX(161px) translateZ(104px) translateY(-45.5px); } .panel:nth-child(34) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(34) .face.-front { width: 61px; height: 91px; transform: translate(-50%, -50%) rotateY(0deg) translateZ(56.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(34) .face.-left { width: 113px; height: 91px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(30.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(34) .face.-top { width: 61px; height: 113px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(45.5px); background: #96918c; } .panel:nth-child(34) .face.-bottom { width: 61px; height: 113px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(45.5px); background: #6e6964; } .panel:nth-child(34) .face.-right { width: 113px; height: 91px; transform: translate(-50%, -50%) rotateY(-90deg) translateZ(30.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(34) .face.-back { width: 61px; height: 91px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(56.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(35) { transform: translateX(25px) translateZ(158px) translateY(-26px); } .panel:nth-child(35) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(35) .face.-front { width: 31px; height: 52px; transform: translate(-50%, -50%) rotateY(0deg) translateZ(34.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(35) .face.-left { width: 69px; height: 52px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(15.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(35) .face.-top { width: 31px; height: 69px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(26px); background: #96918c; } .panel:nth-child(35) .face.-bottom { width: 31px; height: 69px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(26px); background: #6e6964; } .panel:nth-child(35) .face.-right { width: 69px; height: 52px; transform: translate(-50%, -50%) rotateY(-90deg) translateZ(15.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(35) .face.-back { width: 31px; height: 52px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(34.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(36) { transform: translateX(-170px) translateZ(-173px) translateY(-73px); } .panel:nth-child(36) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(36) .face.-front { width: 27px; height: 146px; 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(36) .face.-left { width: 95px; height: 146px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(13.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(36) .face.-top { width: 27px; height: 95px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(73px); background: #96918c; } .panel:nth-child(36) .face.-bottom { width: 27px; height: 95px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(73px); background: #6e6964; } .panel:nth-child(36) .face.-right { width: 95px; height: 146px; transform: translate(-50%, -50%) rotateY(-90deg) translateZ(13.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(36) .face.-back { width: 27px; height: 146px; 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(37) { transform: translateX(3px) translateZ(-109px) translateY(-51px); } .panel:nth-child(37) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(37) .face.-front { width: 63px; height: 102px; transform: translate(-50%, -50%) rotateY(0deg) translateZ(30px); 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(37) .face.-left { width: 60px; height: 102px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(31.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(37) .face.-top { width: 63px; height: 60px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(51px); background: #96918c; } .panel:nth-child(37) .face.-bottom { width: 63px; height: 60px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(51px); background: #6e6964; } .panel:nth-child(37) .face.-right { width: 60px; height: 102px; transform: translate(-50%, -50%) rotateY(-90deg) translateZ(31.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(37) .face.-back { width: 63px; height: 102px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(30px); 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(38) { transform: translateX(-180px) translateZ(170px) translateY(-102px); } .panel:nth-child(38) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(38) .face.-front { width: 59px; height: 204px; transform: translate(-50%, -50%) rotateY(0deg) translateZ(21px); 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(38) .face.-left { width: 42px; height: 204px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(29.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(38) .face.-top { width: 59px; height: 42px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(102px); background: #96918c; } .panel:nth-child(38) .face.-bottom { width: 59px; height: 42px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(102px); background: #6e6964; } .panel:nth-child(38) .face.-right { width: 42px; height: 204px; transform: translate(-50%, -50%) rotateY(-90deg) translateZ(29.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(38) .face.-back { width: 59px; height: 204px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(21px); 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(39) { transform: translateX(-63px) translateZ(-70px) translateY(-77.5px); } .panel:nth-child(39) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(39) .face.-front { width: 67px; height: 155px; transform: translate(-50%, -50%) rotateY(0deg) translateZ(13.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(39) .face.-left { width: 27px; height: 155px; 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(39) .face.-top { width: 67px; height: 27px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(77.5px); background: #96918c; } .panel:nth-child(39) .face.-bottom { width: 67px; height: 27px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(77.5px); background: #6e6964; } .panel:nth-child(39) .face.-right { width: 27px; height: 155px; 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(39) .face.-back { width: 67px; height: 155px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(13.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(40) { transform: translateX(169px) translateZ(-115px) translateY(-45.5px); } .panel:nth-child(40) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(40) .face.-front { width: 114px; height: 91px; transform: translate(-50%, -50%) rotateY(0deg) translateZ(39px); 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(40) .face.-left { width: 78px; height: 91px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(57px); 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(40) .face.-top { width: 114px; height: 78px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(45.5px); background: #96918c; } .panel:nth-child(40) .face.-bottom { width: 114px; height: 78px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(45.5px); background: #6e6964; } .panel:nth-child(40) .face.-right { width: 78px; height: 91px; transform: translate(-50%, -50%) rotateY(-90deg) translateZ(57px); 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(40) .face.-back { width: 114px; height: 91px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(39px); 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(41) { transform: translateX(-54px) translateZ(-105px) translateY(-28.5px); } .panel:nth-child(41) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(41) .face.-front { width: 76px; height: 57px; transform: translate(-50%, -50%) rotateY(0deg) translateZ(19.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(41) .face.-left { width: 39px; height: 57px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(38px); 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(41) .face.-top { width: 76px; height: 39px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(28.5px); background: #96918c; } .panel:nth-child(41) .face.-bottom { width: 76px; height: 39px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(28.5px); background: #6e6964; } .panel:nth-child(41) .face.-right { width: 39px; height: 57px; transform: translate(-50%, -50%) rotateY(-90deg) translateZ(38px); 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(41) .face.-back { width: 76px; height: 57px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(19.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(42) { transform: translateX(177px) translateZ(123px) translateY(-33.5px); } .panel:nth-child(42) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(42) .face.-front { width: 58px; height: 67px; transform: translate(-50%, -50%) rotateY(0deg) translateZ(55.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(42) .face.-left { width: 111px; height: 67px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(29px); 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(42) .face.-top { width: 58px; height: 111px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(33.5px); background: #96918c; } .panel:nth-child(42) .face.-bottom { width: 58px; height: 111px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(33.5px); background: #6e6964; } .panel:nth-child(42) .face.-right { width: 111px; height: 67px; transform: translate(-50%, -50%) rotateY(-90deg) translateZ(29px); 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(42) .face.-back { width: 58px; height: 67px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(55.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(43) { transform: translateX(200px) translateZ(52px) translateY(-63px); } .panel:nth-child(43) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(43) .face.-front { width: 42px; height: 126px; transform: translate(-50%, -50%) rotateY(0deg) translateZ(59px); 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(43) .face.-left { width: 118px; height: 126px; 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(43) .face.-top { width: 42px; height: 118px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(63px); background: #96918c; } .panel:nth-child(43) .face.-bottom { width: 42px; height: 118px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(63px); background: #6e6964; } .panel:nth-child(43) .face.-right { width: 118px; height: 126px; 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(43) .face.-back { width: 42px; height: 126px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(59px); 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(44) { transform: translateX(50px) translateZ(-183px) translateY(-19.5px); } .panel:nth-child(44) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(44) .face.-front { width: 118px; height: 39px; transform: translate(-50%, -50%) rotateY(0deg) translateZ(36px); 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(44) .face.-left { width: 72px; height: 39px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(59px); 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(44) .face.-top { width: 118px; height: 72px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(19.5px); background: #96918c; } .panel:nth-child(44) .face.-bottom { width: 118px; height: 72px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(19.5px); background: #6e6964; } .panel:nth-child(44) .face.-right { width: 72px; height: 39px; transform: translate(-50%, -50%) rotateY(-90deg) translateZ(59px); 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(44) .face.-back { width: 118px; height: 39px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(36px); 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(45) { transform: translateX(-76px) translateZ(-111px) translateY(-41.5px); } .panel:nth-child(45) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(45) .face.-front { width: 67px; height: 83px; 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(45) .face.-left { width: 96px; height: 83px; 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(45) .face.-top { width: 67px; height: 96px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(41.5px); background: #96918c; } .panel:nth-child(45) .face.-bottom { width: 67px; height: 96px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(41.5px); background: #6e6964; } .panel:nth-child(45) .face.-right { width: 96px; height: 83px; 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(45) .face.-back { width: 67px; height: 83px; 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(46) { transform: translateX(-37px) translateZ(-194px) translateY(-77.5px); } .panel:nth-child(46) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(46) .face.-front { width: 116px; height: 155px; transform: translate(-50%, -50%) rotateY(0deg) translateZ(11px); 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(46) .face.-left { width: 22px; height: 155px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(58px); 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(46) .face.-top { width: 116px; height: 22px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(77.5px); background: #96918c; } .panel:nth-child(46) .face.-bottom { width: 116px; height: 22px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(77.5px); background: #6e6964; } .panel:nth-child(46) .face.-right { width: 22px; height: 155px; transform: translate(-50%, -50%) rotateY(-90deg) translateZ(58px); 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(46) .face.-back { width: 116px; height: 155px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(11px); 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(47) { transform: translateX(165px) translateZ(-35px) translateY(-43px); } .panel:nth-child(47) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(47) .face.-front { width: 90px; height: 86px; transform: translate(-50%, -50%) rotateY(0deg) translateZ(11.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(47) .face.-left { width: 23px; height: 86px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(45px); 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(47) .face.-top { width: 90px; height: 23px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(43px); background: #96918c; } .panel:nth-child(47) .face.-bottom { width: 90px; height: 23px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(43px); background: #6e6964; } .panel:nth-child(47) .face.-right { width: 23px; height: 86px; transform: translate(-50%, -50%) rotateY(-90deg) translateZ(45px); 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(47) .face.-back { width: 90px; height: 86px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(11.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(48) { transform: translateX(-107px) translateZ(-182px) translateY(-82.5px); } .panel:nth-child(48) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(48) .face.-front { width: 102px; height: 165px; transform: translate(-50%, -50%) rotateY(0deg) translateZ(49px); 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(48) .face.-left { width: 98px; height: 165px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(51px); 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(48) .face.-top { width: 102px; height: 98px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(82.5px); background: #96918c; } .panel:nth-child(48) .face.-bottom { width: 102px; height: 98px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(82.5px); background: #6e6964; } .panel:nth-child(48) .face.-right { width: 98px; height: 165px; transform: translate(-50%, -50%) rotateY(-90deg) translateZ(51px); 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(48) .face.-back { width: 102px; height: 165px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(49px); 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(49) { transform: translateX(-176px) translateZ(-39px) translateY(-100.5px); } .panel:nth-child(49) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(49) .face.-front { width: 120px; height: 201px; transform: translate(-50%, -50%) rotateY(0deg) translateZ(60px); 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(49) .face.-left { width: 120px; height: 201px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(60px); 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(49) .face.-top { width: 120px; height: 120px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(100.5px); background: #96918c; } .panel:nth-child(49) .face.-bottom { width: 120px; height: 120px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(100.5px); background: #6e6964; } .panel:nth-child(49) .face.-right { width: 120px; height: 201px; transform: translate(-50%, -50%) rotateY(-90deg) translateZ(60px); 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(49) .face.-back { width: 120px; height: 201px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(60px); 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(50) { transform: translateX(4px) translateZ(-158px) translateY(-22px); } .panel:nth-child(50) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(50) .face.-front { width: 62px; height: 44px; transform: translate(-50%, -50%) rotateY(0deg) translateZ(38px); 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(50) .face.-left { width: 76px; height: 44px; 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(50) .face.-top { width: 62px; height: 76px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(22px); background: #96918c; } .panel:nth-child(50) .face.-bottom { width: 62px; height: 76px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(22px); background: #6e6964; } .panel:nth-child(50) .face.-right { width: 76px; height: 44px; 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(50) .face.-back { width: 62px; height: 44px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(38px); 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(51) { transform: translateX(-197px) translateZ(-182px) translateY(-15px); } .panel:nth-child(51) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(51) .face.-front { width: 88px; height: 30px; transform: translate(-50%, -50%) rotateY(0deg) translateZ(36.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(51) .face.-left { width: 73px; height: 30px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(44px); 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(51) .face.-top { width: 88px; height: 73px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(15px); background: #96918c; } .panel:nth-child(51) .face.-bottom { width: 88px; height: 73px; transform: translate(-50%, -50%) rotateX(-90deg) translateZ(15px); background: #6e6964; } .panel:nth-child(51) .face.-right { width: 73px; height: 30px; transform: translate(-50%, -50%) rotateY(-90deg) translateZ(44px); 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(51) .face.-back { width: 88px; height: 30px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(36.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(52) { transform: translateX(-107px) translateZ(-197px) translateY(-61.5px); } .panel:nth-child(52) .face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .panel:nth-child(52) .face.-front { width: 36px; height: 123px; transform: translate(-50%, -50%) rotateY(0deg) translateZ(46px); 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(52) .face.-left { width: 92px; height: 123px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(18px); 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(52) .face.-top { width: 36px; height: 92px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(61.5px); background: #96918.........完整代码请登录后点击上方下载按钮下载查看
网友评论0