Creating a 3D Book Cover with CSS: Techniques, Code, and Compatibility Fixes

Index

HTML structure idea – 1 minute read

Perspective and 3D space – 2 minutes read

Specific implementation of book‑cover rotation – 4 minutes read

Compatibility – 6 minutes read

HTML Structure Idea

A lightweight container holds a link with an image, a shadow , and an ::after pseudo‑element that simulates the book‑spine thickness.

<code>&lt;!-- Book cover container --&gt;
&lt;div class="book-cover"&gt;
  &lt;!-- Link --&gt;
  &lt;a class="link" href="//book.qidian.com/info/1004608738" target="_blank"&gt;
    &lt;img src="//qidian.qpic.cn/qdbimg/349573/1004608738/90" alt="圣墟"&gt;
  &lt;/a&gt;
  &lt;!-- Shadow --&gt;
  &lt;span&gt;&lt;/span&gt;
  &lt;!-- Spine thickness (pseudo‑element) --&gt;
  ::after
&lt;/div&gt;</code>

Perspective and 3D Space

Adding transform: perspective(...) to a parent element creates a 3D space where child elements rotate around the X, Y, and Z axes. Without perspective, transforms remain flat 2D.

Using CSS3 rotateY and rotateX produces the 3D book‑cover effect.

Specific Implementation of Book‑Cover Rotation

The SASS code below defines the layout, adds perspective, and creates the rotating cover, spine, and shadow. Two browser groups are handled: modern browsers (Chrome, Firefox, IE10‑11, WebKit) using :root , and legacy IE7‑IE9 which skip the 3D transforms.

<code>/* SASS – key properties only */
.book-cover {
  position: relative;
  width: 52px;
  height: 91px;
  .link { position: relative; z-index: 3; }
  img { width: 60px; height: 87px; }
}
/* Modern browsers */
:root {
  .book-cover {
    transform: perspective(60px) rotateY(-10deg);
    &::after {
      position: absolute;
      z-index: 2;
      top: 2%; left: 100%;
      width: 10%; height: 92%;
      content: '';
      background-color: #EFEFEF;
      box-shadow: inset 0 0 5px #333;
      transform: perspective(60px) rotateY(30deg);
    }
    span {
      position: absolute;
      z-index: 1;
      top: 84%; left: 7px;
      width: 20px; height: 10px;
      content: '';
      box-shadow: 25px 0 5px 5px #ADADAD;
      transform: perspective(74px) rotateX(-70deg) rotateY(-5deg);
    }
    img { width: 52px; }
  }
}
</code>

Compatibility

Different browsers exhibit distinct issues:

Firefox shows jagged edges on elements with perspective. Adding outline: 1px solid transparent to the img eliminates the jaggies without affecting layout.

IE9 supports :root but not 3D transforms, causing the shadow to leak and the cover width to shrink. The shadow is hidden with -ms-transform: scale(0) , and a small JavaScript snippet resets the image width to 60 px after page load.

Safari ignores z-index on transformed elements, leading to layer‑penetration bugs. Using transform: translateZ(...) on the anchor and on the shadow element restores the correct stacking order.

Example fixes:

<code>/* Firefox jaggy fix */
img { outline: 1px solid transparent; }

/* IE9 shadow hide */
span { -ms-transform: scale(0); }

/* Safari layer fix */
a { transform: translateZ(50px); }
span { transform: translateZ(10px); }
</code>

Conclusion

While modern browsers make 3D CSS effects feasible, developers must still address inconsistencies across Firefox, IE, and Safari. Continuous testing, targeted hacks, and fallback strategies are essential for maintaining a polished user experience.