分享一个非常有趣的纯css杂志封面折叠效果

博主：小猫娃来啦
文章核心：有趣的纯css杂志封面折叠效果

效果出处

这个css杂志封面折叠效果非常有趣，我就转载加以记录。

效果来源于：码上掘金Mad Magazine

---

---

---

效果

---

---

---

HTML

		<div class="jaffee-wrapper">
		  <span class="jaffee" style="--bg: url('https://thomaspark.co/wp/wp-content/uploads/2020/06/MAD-Magazine-520-Fold-in.jpg');">
		    <span class="a">span>
		    <span class="bc">
		      <span class="b">span>
		      <span class="c">span>
		    span>
		    <img src="https://thomaspark.co/wp/wp-content/uploads/2020/06/MAD-Magazine-520-Fold-in.jpg">
		  span>
		div>

---

---

---

CSS

.jaffee-wrapper {
    margin: 2em 0 4em;
    perspective: 60em;
    text-align: center;
}
.jaffee {
  position: relative;
  display: inline-flex;
  transform: rotateX(10deg); 
  transform-style: preserve-3d;
  cursor: grab;
}

.jaffee img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 56vh;
  opacity: 0;
}

.jaffee .a,
.jaffee .b,
.jaffee .c {
  top: 0;
  display: inline-block;
  height: 100%;
  background-image: var(--bg);
  background-size: cover;
  background-repeat: no-repeat;
}

.jaffee .a {
  position: absolute;
  left: 0;
  width: 50%;
  background-position: 0 0;
}

.jaffee .bc {
  position: absolute;
  display: inline-flex;
  width: 50%;
  height: 100%;
  left: 50%;
  transform-origin: left;
  transition: transform 3s;
  transform-style: preserve-3d;
}

.jaffee .b,
.jaffee .c {
  position: relative;
  width: 50%;
  backface-visibility: hidden;
}

.jaffee .b {
  background-position: 66.666667% 0;
  transform-style: preserve-3d;
}

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

.jaffee .c {
  background-position: 100% 0;
  transform-origin: left;
  transition: transform 2s;
}

.jaffee:hover .bc,
.jaffee:active .bc {
  transform: rotateY(-180deg) translateZ(-1px);
  transition: transform 2s;
}

.jaffee:hover .c,
.jaffee:active .c {
  transform: rotateY(180deg) translateZ(2px);
  transition: transform 3s;
}

杂志封面折叠效果是一种基于 CSS 3D 变换实现的动画效果，通过改变元素的旋转角度以及透视效果，使得元素具备了三维空间的感知。该效果可用于网页设计、图形展示等多种场景中，能够增强用户体验和视觉效果，提升设计的美感和专业程度。

对于开发者来说，实现杂志封面折叠效果需要熟悉 CSS 3D 变换的相关属性和技术，如 transform、perspective 和 backface-visibility 等。这涉及到对元素的定位、旋转角度、透明度、边框等进行细致的设置，以及对浏览器不同兼容性的考虑和优化。

从设计本身来看，杂志封面折叠效果不仅需要考虑视觉效果的呈现，还需要依据页面布局和元素定位设置合理的旋转方向、透视效果、背景颜色等，以确保整体效果符合设计需求和用户习惯。

总的来说，杂志封面折叠效果在提升网页设计和视觉效果方面有着一定的作用，然而该效果需要较高的技术和设计水平，所以在实现前需要认真分析设计需求和考虑用户体验，同时也需要选择合适的技术方案和工具库，以确保效果的稳定性和兼容性。

---