The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="book" tabindex="0" aria-label="Book: hover or focus to open">
  <div class="page">
    <h4>Chapter 1</h4>
    <p>Server Components render on the server and send zero JavaScript to the browser.</p>
  </div>
  <div class="cover">
    <div class="cover-front">
      <span>Free course</span>
      <h3>Next.js 16<br />Complete Guide</h3>
      <small>Ravindra Nath Jha</small>
    </div>
    <div class="cover-back"></div>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same 3d scene, then ask it to adapt the colours, text or framework to your project.

Create a 3D book that opens on hover using only HTML and CSS (no JavaScript).

Structure:
- A "book" wrapper (220px by 300px, tabindex="0") with perspective: 1400px and a slight rotateX(8deg).
- A "page" element behind the cover: cream paper gradient with a darker strip at the left (the gutter), a heading "Chapter 1" and two lines of text.
- A "cover" element on top containing two faces: "cover-front" and "cover-back".

Requirements:
- The cover has transform-style: preserve-3d, transform-origin: left center, and a 0.9s transform transition.
- On :hover and :focus-visible of the book, rotate the cover rotateY(-150deg) so it swings open like a real book.
- Both cover faces are absolutely positioned with backface-visibility: hidden. The back face is pre-rotated rotateY(180deg) and coloured dark navy, so the inside of the cover is visible when it is open.
- The front cover has a navy-to-indigo gradient, an inset dark shadow along the left edge to suggest a spine, a small orange "Free course" pill at the top, the title "Next.js 16 Complete Guide" at the bottom and an author line.
- The page has a soft drop shadow. Respect prefers-reduced-motion.
- Centre it on a dark background.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Layer two things: the inner page underneath and the cover on top.

2. 2

   Set transform-origin: left center on the cover. Rotations happen around this point, so the cover swings on its spine instead of spinning around its middle.

3. 3

   Rotate the cover with a negative rotateY on hover; with perspective on the parent it swings towards the viewer and open.

4. 4

   Give the cover two faces with backface-visibility: hidden, the second one pre-rotated 180 degrees, so the inside of the cover has its own colour.

5. 5

   Add an inset shadow on the spine side of the cover and a gradient gutter on the page. Small details like these sell the illusion.

6. 6

   Support keyboard users with tabindex and :focus-visible.

Customisation tips

• Stack several pages with slightly different rotation angles for a fanned-pages effect.
• Use a real cover image as the background of the front face.
• Link the whole book to your course or download page by wrapping it in an anchor.

More 3d scenes