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