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.

今天，我们将介绍一种弯曲和折叠HTML元素的酷小技术。 这项技术绝不是什么新技术，它是在以前的一些工作中进行探索的，一个很好的例子是Romain的作品集。 它可以用于创建有趣且多样化的布局，但是请记住，这是非常实验性的。

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.

首先，我要讲清楚：这种效果全是烟雾和镜子。 HTML元素实际上无法弯曲，很抱歉，这会让您伤心。

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.

首先，我们将添加具有透视图的容器，以便我们看到3D发生的旋转。 我们还将创建具有固定尺寸的子“折叠”，并隐藏溢出。 上折和下折绝对要放在中折的各自侧面。

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.

overflow:hidden是必要的，这就是使效果起作用的原因。 因为这就是即使折痕具有不同的旋转角度也使它看起来像是一个单元的原因。

<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.

注意：在这种情况下，请使用bottom和top属性来放置额外的折叠。 如果要添加两个以上，则需要堆叠转换。 例如，您可以使用SCSS函数来生成所有折叠就位的代码。

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.

现在，让我们在折叠中添加一些内容，看看它看起来如何。 我们将它们插入新的.fold-content分区中。 每个折叠都需要具有相同的内容副本才能无缝连接。

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

目前，内容将是一堆正方形和标题。 但是您可以添加任何HTML元素。

<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.

现在，内容不合时宜，因为每个折页的内容都在顶部。 嗯，这就是HTML的工作方式。 我们希望它是一个单一的单元，并且全部对齐。 因此，我们将在内容和折页之间添加一个额外的.fold-align 。

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!

因为我们的褶皱overflow: hidden所以没有默认的滚动方式。 更不用说他们还需要同步滚动。 因此，我们需要自己进行管理！

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.clientHeightdocument.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!

就是这样！ 为了使它更有趣，我们将去除褶皱的背景色。 并添加一些lerp以使滚动体验更流畅！

演示地址

结论(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!

在这个简短的教程中，我们介绍了折叠HTML元素的基本错觉。 但是我们可以做更多的事情！ 每个演示都使用了我们刚刚学习的基本技术的不同变体(和样式)！

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!

如果您有任何疑问或想分享一些信息，请在评论中告诉我们，或通过Twitter @anemolito与我联系！

翻译自: https://tympanus.net/codrops/2020/01/14/3d-folding-technique/