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

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

代码语言：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: 10.........完整代码请登录后点击上方下载按钮下载查看