Flexible multi-panel background

About this Code

Hello reader, I am codingfrontend. Nice to meet you again in this free code sharing website. In this post I am going to explain about Flexible multi-panel background. If you are new to this website, we recommend you to subscribe to our youtube channel and watch the videos. Ok lets dive into the code.

https://toster.ru/q/675822 --- If the work I've been putting out since early 2012 has helped you in any way or you just like it and you wish me to be able to continue putting out stuff, please consider one of the following: * being a cool cat 😼🎩 and becoming a patron on Patreon [![become a patron button](https://assets.codepen.io/2017/btn_patreon.png)](https://www.patreon.com/anatudor) * making a one time donation via Ko-fi [![ko-fi](https://assets.codepen.io/2017/btn_kofi.svg)](https://ko-fi.com/anatudor) * getting me something off my Amazon WishList [🎁 🇺🇸](https://www.amazon.com/gp/registry/wishlist/2Y3C4722GXH0I/) / [🎁 🇬🇧](https://www.amazon.co.uk/gp/registry/wishlist/2I25W7U0KADSR/) * or at least sharing this to show the rest of the world what can be done with CSS these days Thank you!

Images

These are the output images of the code. You can click on the image to enlarge it. also you can click the try it button to see the output.

Source Code

This is the source code of the code. You can copy and paste the code to your editor.

html {
  overflow: hidden;
  background: #333;
}

body {
  margin: 0;
  height: 100vh;
  perspective: 125vmin;
  -webkit-filter: drop-shadow(-1vmin 1vmin 1vmin #000);
}

div {
  position: absolute;
  transform-style: preserve-3d;
}

.assembly {
  top: 50%;
  left: calc(50% - .5*var(--dx)*85vmin);
  transform: rotatey(35deg);
}

.panel {
  --mid: calc((var(--p) + var(--k)*0.25)*85vmin);
  transform: translate3d(calc(var(--dx)*85vmin), 0, calc(var(--dz)*85vmin));
}
.panel:before, .panel:after {
  position: absolute;
  margin: -32.5vmin -42.5vmin;
  width: 85vmin;
  height: 65vmin;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/bg_sq_halloween_0.jpg") 50%/cover;
  content: "";
}
.panel:before {
  transform-origin: var(--mid);
  transform: rotatey(-90deg);
  -webkit-clip-path: inset(0 calc(100% - var(--mid)) 0 calc(var(--p)*100%));
          clip-path: inset(0 calc(100% - var(--mid)) 0 calc(var(--p)*100%));
  filter: brightness(0.4);
}
.panel:after {
  -webkit-clip-path: inset(0 calc(100% - (var(--p) + var(--k))*85vmin) 0 var(--mid));
          clip-path: inset(0 calc(100% - (var(--p) + var(--k))*85vmin) 0 var(--mid));
}

And also you can click the try it button to see the output of the code in our web Code Playground.
You can also download the code to the zip format by clicking the download button. The download process is little bit complex, you need ti await for 10 seconds. after that you can download the code by clicking the generated download link.

Download

Try It

Frontend Forever