如图所示，这是一个杂志封面图的折叠成果，折叠前后的图片内容齐全不违和，霎时对这个图片内容的排版设计很是称誉，但这块不再本次文章的探讨范畴，本次文章是要用纯CSS实现这个折叠成果。
按图片的成果进行代码还原很多形式都能够实现，以下是本次实现的次要几点：
- 纯CSS实现，不依赖JavaScript
- 应用单张图片，不须要在PS中切割成多单图片
- 能够通过款式属性中设置CSS变量来配置页面
实现过程
界面布局
HTML的实现绝对简略，img标签次要实现内容大小的管制，将图标外部的内容宰割为3个局部，其中左侧span.a占50%，右侧 span.bc占50%，span.bc中的 span.b 和 span.c 各占比一半。图片的地址从HTML中可传入，这样须要更换图片的时候就不须要更新CSS中的代码了。
<span class="jaffee" style="--bg: url('path/to/image.png');"> <span class="a"></span> <span class="bc"> <span class="b"></span> <span class="c"></span> </span> <img src="path/to/image.png"></span>你可能会好奇图片为什么被暗藏了，外围的逻辑就是对不同的宰割块中设置不同的 background-position，每一块都是用的同一个图片地址，然而真正显示的区域不一样，拼在一起刚好是一张残缺的图片。当hover时对 span.b 和 span.c设置不同的动画成果，接下来看外围的代码实现。
下面有提到img标签次要实现内容大小的管制，所有img标签的目标是撑开内容的大小，然而自身是不展现在页面中的，所以img标签有一个非凡的款式管制opacity: 0，暗藏其透明度。这样咱们就能够灵便的操作span宰割进去的背景了。
img { width: auto; height: auto; max-width: 100%; max-height: 56vh; opacity: 0;}接下来设置abc三个区域的尺寸：
.jaffee .a { position: absolute; left: 0; width: 50%; background-position: 0 0;}.jaffee .bc { position: absolute; width: 50%; height: 100%; left: 50%;}.jaffee .b,.jaffee .c { position: relative; width: 50%;}bc区域会波及到3d动画，进一步减少相干css属性：
.jaffee .bc { transform-origin: left; transition: transform 3s; transform-style: preserve-3d;}而后对不同的区域背景图片设置不同的 background-position，a区域在最左侧且无相干动画展现，所以不须要设置：
.jaffee .b { background-position: 66.666667% 0; transform-style: preserve-3d;}.jaffee .c { background-position: 100% 0; transform-origin: left;}为了让成果更有3d的感觉，给最外层减少 perspective 透视，让成果更真切：
.jaffee-wrapper { perspective: 60em;}此时的界面成果：
动画实现
布局实现后接下来就是动画的实现过程了，动画看着有些简单，其实认真拆解一下并没有那么简单，认真看动画的过程，只有bc区域有动画的过程。整个bc区域Y轴进行了一次180deg的翻转，bc区域的c区域实质是没有翻转，然而因为父级的翻转的起因须要进行设置反向的值进行对消。另外能够发现c区域的动画完结工夫要晚一些，阐明两者的动画执行工夫上有区别。
基于上述的外围代码如下：
.jaffee:hover .bc,.jaffee:active .bc { transform: rotateY(-180deg) ; transition: transform 2s;}.jaffee:hover .c,.jaffee:active .c { transform: rotateY(180deg); transition: transform 3s;}加强暗影
为了让成果更实在贴近事实，在折叠的时候减少了b区域反面的彩色暗影的实现，这个暗影的实现应用伪元素，代码如下：
.jaffee .b:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; transform: rotateY(180deg) translateZ(1px); transform-style: preserve-3d; backface-visibility: hidden;}这里能够看到对伪元素设置了translateZ(1px)，所以须要对刚刚设置的动画区域也减少相应的translateZ，防止在动画过程中彩色暗影的笼罩。减少后的代码如下：
.jaffee:hover .bc,.jaffee:active .bc { transform: rotateY(-180deg) translateZ(-1px);}.jaffee:hover .c,.jaffee:active .c { transform: rotateY(180deg) translateZ(2px);}到此整个动画成果就实现实现了，最终的成果如下：
在线预览
码上掘金地址：
https://code.juejin.cn/pen/7271095662643511351
最初
本文解析了通过纯 CSS 实现杂志封面折叠成果，拆解之后的实现过程绝对就比拟清晰了，次要应用了css 3d相干属性。还能够用于各种其余场景，比方卡片翻转、菜单开展等等，有趣味的敌人能够尝试看看~
看完本文如果感觉有用，记得点个赞反对，珍藏起来说不定哪天就用上啦～
专一前端开发，分享前端相干技术干货，公众号：南城大前端（ID: nanchengfe）
参考
The Mad Magazine Fold-In Effect in CSS：https://thomaspark.co/2020/06/the-mad-magazine-fold-in-effect...