本文主要介紹了純CSS雜志封面折疊效果，分享給大家，具體如下：

如圖所示，這是一個雜志封面圖的折疊效果，折疊前后的圖片內(nèi)容完全不違和，瞬間對這個圖片內(nèi)容的排版設(shè)計很是稱贊，但這塊不再本次文章的討論范圍，本次文章是要用純CSS實現(xiàn)這個折疊效果。

按圖片的效果進行代碼還原很多方式都可以實現(xiàn)，以下是本次實現(xiàn)的主要幾點：

• 純CSS實現(xiàn)，不依賴JavaScript
• 使用單張圖片，不需要在PS中切割成多單圖片
• 可以通過樣式屬性中設(shè)置CSS變量來配置頁面

實現(xiàn)過程

界面布局

HTML的實現(xiàn)相對簡單，img標簽主要實現(xiàn)內(nèi)容大小的控制，將圖標內(nèi)部的內(nèi)容分割為3個部分，其中左側(cè)span.a占50%，右側(cè) 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>

你可能會好奇圖片為什么被隱藏了，核心的邏輯就是對不同的分割塊中設(shè)置不同的 background-position，每一塊都是用的同一個圖片地址，但是真正顯示的區(qū)域不一樣，拼在一起剛好是一張完整的圖片。當hover時對 span.b 和 span.c設(shè)置不同的動畫效果，接下來看核心的代碼實現(xiàn)。

上面有提到img標簽主要實現(xiàn)內(nèi)容大小的控制，所有img標簽的目的是撐開內(nèi)容的大小，但是本身是不展示在頁面中的，所以img標簽有一個特殊的樣式控制opacity: 0，隱藏其透明度。這樣我們就可以靈活的操作span分割出來的背景了。

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

接下來設(shè)置abc三個區(qū)域的尺寸：

.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區(qū)域會涉及到3d動畫，進一步增加相關(guān)css屬性：

.jaffee .bc {
  transform-origin: left;
  transition: transform 3s;
  transform-style: preserve-3d;
}

然后對不同的區(qū)域背景圖片設(shè)置不同的 background-position，a區(qū)域在最左側(cè)且無相關(guān)動畫展示，所以不需要設(shè)置：

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

此時的界面效果：

動畫實現(xiàn)

布局完成后接下來就是動畫的實現(xiàn)過程了，動畫看著有些復(fù)雜，其實仔細拆解一下并沒有那么復(fù)雜，仔細看動畫的過程，只有bc區(qū)域有動畫的過程。整個bc區(qū)域Y軸進行了一次180deg的翻轉(zhuǎn)，bc區(qū)域的c區(qū)域本質(zhì)是沒有翻轉(zhuǎn)，但是因為父級的翻轉(zhuǎn)的原因需要進行設(shè)置反向的值進行抵消。另外可以發(fā)現(xiàn)c區(qū)域的動畫結(jié)束時間要晚一些，說明兩者的動畫執(zhí)行時間上有區(qū)別。

基于上述的核心代碼如下：

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

增強陰影

為了讓效果更真實貼近現(xiàn)實，在折疊的時候增加了b區(qū)域背面的黑色陰影的實現(xiàn)，這個陰影的實現(xiàn)使用偽元素，代碼如下：

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

這里可以看到對偽元素設(shè)置了translateZ(1px)，所以需要對剛剛設(shè)置的動畫區(qū)域也增加相應(yīng)的translateZ，避免在動畫過程中黑色陰影的覆蓋。增加后的代碼如下：

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

到此整個動畫效果就實現(xiàn)完成了，最終的效果如下：

最后

本文解析了通過純 CSS 實現(xiàn)雜志封面折疊效果，拆解之后的實現(xiàn)過程相對就比較清晰了，主要使用了css 3d相關(guān)屬性。還可以用于各種其他場景，比如卡片翻轉(zhuǎn)、菜單展開等等，有興趣的朋友可以嘗試看看~

參考

The Mad Magazine Fold-In Effect in CSS：https://thomaspark.co/2020/06/the-mad-magazine-fold-in-effect-in-css/

到此這篇關(guān)于純CSS雜志封面折疊效果的文章就介紹到這了,更多相關(guān)CSS雜志折疊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！