css+div布局实现一个三维艺术画廊展厅效果代码-html代码-BFW代码库

代码语言：html

代码描述：div结合css代码布局实现一个三维艺术画廊展厅效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        :root {
          --base-height: 900px;
          --base-width: 900px;
          --side-height: calc(calc(var(--base-height) / 2) - 100px);
        }
        
        body {
          height: 100vh;
          width: 100vw;
          background: black;
        }
        
        .scene {
          min-width: 1400px;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          -webkit-perspective: 47em;
          perspective: 47em;
          -webkit-perspective-origin: 26% 20%;
          perspective-origin: 26% 20%;
        }
        
        .base {
          -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
          -webkit-transform: rotatex(90deg) rotatez(-10deg) translate(-15%, 0%);
          -ms-transform: rotatex(90deg) rotate(-10deg) translate(-15%, 0%);
          transform: rotatex(90deg) rotatez(-10deg) translate(-15%, 0%);
          height: var(--base-height);
          width: var(--base-width);
          outline: dashed;
          position: relative;
          background-image: -o-linear-gradient(45deg, #525252, black 90%);
          background-image: linear-gradient(45deg, #525252, black 90%);
        }
        
        .leftside {
          position: absolute;
          width: calc(var(--base-width) / 2);
          height: var(--side-height);
          top: 40%;
          float: left;
          -webkit-transform: rotatex(-90deg) rotatey(10deg) translate(0%, -50%);
          -ms-transform: rotatex(-90deg) rotatey(10deg) translate(0%, -50%);
          transform: rotatex(-90deg) rotatey(10deg) translate(0%, -50%);
          -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
        }
        .leftside.ground {
          opacity: 0.2;
          -webkit-transform: translate(30px, 50%) rotateZ(-10deg);
          -ms-transform: translate(30px, 50%) rotate(-10deg);
          transform: translate(30px, 50%) rotateZ(-10deg);
        }
        
        .rightside {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          position: absolute;
          right: 0;
          -webkit-transform: translateZ(calc(var(--side-height) / 2)) translate(50%, 0%) rotateY(90deg);
          transform: translateZ(calc(var(--side-height) / 2)) translate(50%, 0%) rotateY(90deg);
          height: 100%;
          width: var(--side-height);
          outline: dashed;
          -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
        }
        
        .rightsidebar {
          display: -ms-grid;
          display: grid;
          -ms-grid-columns: 1fr [6];
          grid-template-columns: repeat(6, 1fr);
          position: absolute;
          right: 0;
          -webkit-transform: translateZ(calc(var(--side-height) / 2)) translate(50%, 0%) rotateY(90deg);
          transform: translateZ(calc(var(--side-height) / 2)) translate(50%, 0%) rotateY(90deg);
          height: 100%;
          width: var(--side-height);
          outline: dashed;
          -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
        }
        
        .leftwall {
          position: absolute;
          left: 0;
          height: 100%;
          width: var(--side-height);
          -webkit-transform: rotateY(90deg) translateZ(calc(-1 * calc(calc(var(--side-height) / 2) - 10px))) translate(calc(-1 * calc(var(--side-height) / 2)));
          transform: rotateY(90deg) translateZ(calc(-1 * calc(calc(var(--side-height) / 2) - 10px))) translate(calc(-1 * calc(var(--side-height) / 2)));
          background: #4e4e4e;
        }
        
        .ground {
          filter: blur(8px);
          -webkit-filter: blur(8px);
          -webkit-transform: none;
          -ms-transform: none;
          transform: none;
          opacity: 0.1;
        }
        
        .inner {
          display: -ms-grid;
          display: grid;
          -ms-grid-rows: 1fr [6];
          grid-template-rows: repeat(6, 1fr);
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          height: 100%;
          width: 100%;
          -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
        }
        .inner .image {
          -webkit-transform: rotatez(-90deg);
          -ms-transform: rotate(-90deg);
          transform: rotatez(-90deg);
          -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
          -webkit-box-shadow: -6px 6px 2px -3px #605d5d;
          box-shadow: -6px 6px 2px -3px #605d5d;
          padding: 1em;
          display: inline-block;
          border: 1px solid black;
        }
        .inner .img {
          display: block;
          height: 60px;
          width: 60px;
          max-width: 100%;
          margin: 0 auto;
          -webkit-filter: sepia(75%);
        }
        
        .inner.left {
          -ms-grid-columns: unset;
          grid-template-columns: unset;
          -ms-grid-rows: unset;
          grid-template-rows: u.........完整代码请登录后点击上方下载按钮下载查看