关于前端:纯CSS杂志封面折叠效果

如图所示，这是一个杂志封面图的折叠成果，折叠前后的图片内容齐全不违和，霎时对这个图片内容的排版设计很是称誉，但这块不再本次文章的探讨范畴，本次文章是要用纯 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…