3D Folding Layout Technique for HTML Elements

Celý článek

Today we’re going to take a look at a cool, small technique to bend and fold HTML elements. This technique is not new by any means, it was explored in some previous works and one great example is Romain’s portfolio. It can be used to create interesting and diverse layouts, but please keep in mind that this is very experimental.

To start the article I’m going to come clean: this effect is all smoke and mirrors. HTML elements can’t actually bend, sorry if that breaks your heart.

This illusion is created by lining up multiple elements together to give the impression that it is a single piece. Then, rotating the elements on the edges making it look like the single piece is bending. Let’s see how that looks in code.

Creating the great fold illusion!

To begin, we’ll add a container with perspective so that we see the rotations happening in 3D. We’ll also create children “folds” with fixed dimensions and overflow hidden. The top and bottom folds are going to be placed absolutely on their respective sides of the middle fold.

Giving the folds fixed dimensions is not necessary; you can even give each fold different sizes if you are up to the challenge! But having fixed dimensions simplifies a lot of the alignment math.

The overflow:hidden is necessary, and it’s what makes the effect work. Because that’s what makes it seem like it’s a single unit even when the folds have different rotations.

<div class="wrapper-3d">
	<div class="fold fold-top"></div>
	<div class="fold fold-center" id="center-fold"></div>
	<div class="fold fold-bottom"></div>	
</div>

.wrapper-3d {
  position: relative;
    /* Based on screen with so the perspective doesn't break on small sizes*/
  perspective: 20vw;
  transform-style: preserve-3d;
}

.fold {
  overflow: hidden;
  width: 100vw;
  height: 80vh;
}

.fold-after {
  background: #dadada;
  position: absolute;
  transform-origin: top center;
  right: 0;
  left: 0;
  top: (100%;
}

.fold-before {
  background: #dadada;
  position: absolute;
  transform-origin: bottom center;
  left: 0;
  right: 0;
  bottom: 100%;
}

Note: In this case, were using the bottom and top attributes to position our extra folds. If you wanted to add more than two you would need to stack transforms. You could for example use a SCSS function that generates the code for all the folds to be in place.

Now let’s add a little bit of content inside the folds and see how that looks like. We’ll insert them inside a new .fold-content division. Each fold needs to have the same copy of the content for it to be seamless.

For now, the content is going to be a bunch of squares and headers. But you can add any HTML elements.

<div class="wrapper-3d">
	<div class="fold fold-top">
		<div class="fold-content">
			<div class="square green"></div>
			<h1>This is my content</h1>
			<div class="square blue"></div>
			<h1>This is my content</h1>
			<div class="square red"></div>
		</div>
	</div>
	<div class="fold fold-center" id="center-fold">
		<div class="fold-content" id="center-content">
			<div class="square green"></div>
			<h1>This is my content</h1>
			<div class="square blue"></div>
			<h1>This is my content</h1>
			<div class="square red"></div>
		</div>
	</div>
	<div class="fold fold-bottom">
		<div class="fold-content">
			<div class="square green"></div>
			<h1>This is my content</h1>
			<div class="square blue"></div>
			<h1>This is my content</h1>
			<div class="square red"></div>
		</div>
	</div>
</div>

.square {
	width: 100%;
	padding-bottom: 75%;
}

.green {
	background-color: lightgreen;
}

.blue {
	background-color: lightblue;
}

.red {
	background-color: lightcoral;
}

Right now the content is out of place because each fold has its content at the top. Well, that’s how HTML works. We want it to be a single unit and be all aligned. So we’ll add an extra .fold-align between the content and the fold.

Each fold is going to have its unique alignment. We’ll position their content to start at the top of the middle fold.

<div class="wrapper-3d">
    <div class="fold fold-top">
        <div class="fold-align">
            <div class="fold-content">
                <!-- Content -->
            </div>
        </div>
    </div>
    <div class="fold fold-center" id="center-fold">
        <div class="fold-align">
            <div class="fold-content" id="center-content">
                <!-- Content -->
            </div>
        </div>
    </div>
    <div class="fold fold-bottom">
        <div class="fold-align">
            <div class="fold-content">
                <!-- Content -->
            </div>
        </div>
    </div>
</div>

.fold-align {
	width: 100%;
	height: 100%;
}

.fold-bottom .fold-align {
	transform: translateY(-100%);
}

.fold-top .fold-align {
	transform: translateY(100%);
}

Now we only need to rotate the top and bottom folds from the respective origin and we’re done with creating the effect!

.fold-bottom {
	transform-origin: top center;
	transform: rotateX(120deg);
}

.fold-top {
	transform-origin: bottom center;
	transform: rotateX(-120deg);
}

Scrolling the folds

Because our folds have overflow: hidden there isn’t a default way to scroll through them. Not to mention that they also need to scroll in sync. So, we need to manage that ourselves!

To make our scroll simple to manage, we’ll take advantage of the regular scroll wheel.

First, we’ll set the body’s height to how big we want the scroll to be. And then we’ll sync our elements to the scroll created by the browser. The height of the body is going to be the screen’s height plus the content overflowing the center fold. This will guarantee that we are only able to scroll if the content overflows its fold height.

let centerContent = document.getElementById('center-content');
let centerFold = document.getElementById('center-fold');

let overflowHeight =  centerContent.clientHeight - centerFold.clientHeight

document.body.style.height = overflowHeight + window.innerHeight + "px";

After we create the scroll, we’ll update the position of the folds’ content to make them scroll with the page.

let foldsContent = Array.from(document.getElementsByClassName('fold-content'))
let tick = () => {
    let scroll = -(
        document.documentElement.scrollTop || document.body.scrollTop
    );
    foldsContent.forEach((content) => {
        content.style.transform = `translateY(${scroll}px)`;
    })
    requestAnimationFrame(tick);
}
tick();

And that’s it! To make it more enjoyable, we’ll remove the background color of the folds. And add a some lerp to make the scrolling experience smoother!

Conclusion

Over this short tutorial, we went over the basic illusion of folding HTML elements. But there’s so much more we can do with this! Each of the demos uses different variations (and styles) of the basic technique we just learned!

With one variation you can use non-fixed size elements. With another variation, you can animate them while sticking some folds to the sides of the screen.

Each demo variation has its benefits and caveats. I encourage you to dig into the code and see how the small changes between demos allow for different results!

Also, it’s good to note that in some browsers this technique has some tiny line gaps between folds. We minimized this by scaling up the parent and down-scaling the child elements. It’s not a perfect solution but it reduced it slightly and did the trick for most cases! If you know how to remove them for good let us know!

If you have any questions or want to share something lets us know in the comments or reach out to me on Twitter @anemolito!

3D Folding Layout Technique for HTML Elements was written by Daniel Velasquez and published on Codrops.