Free 3D Scene

3D Laptop Screen Reveal

A MacBook-style laptop built with pure CSS 3D transforms that opens its screen on hover. Features a glowing code editor screen, brushed aluminium body, keyboard well, and glass trackpad.

dark
css 3d
mockup
laptop
hardware
animation

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="stage">
  <div class="laptop" tabindex="0" aria-label="3D Laptop Mockup. Hover or focus to open screen">
    <div class="lid">
      <div class="screen">
        <div class="screen-bar">
          <div class="window-dots"><i></i><i></i><i></i></div>
          <span class="file-name">App.jsx &mdash; Next.js 16</span>
        </div>
        <div class="screen-code">
          <p><span class="kwd">import</span> { useState } <span class="kwd">from</span> <span class="str">"react"</span>;</p>
          <p><span class="kwd">export default function</span> <span class="fn">Hero</span>() {</p>
          <p>&nbsp;&nbsp;<span class="kwd">return</span> (</p>
          <p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;<span class="tag">div</span> <span class="attr">className</span>=<span class="str">"canvas-3d"</span>&gt;</p>
          <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;<span class="tag">h1</span>&gt;Ship with 3D UI&lt;/<span class="tag">h1</span>&gt;</p>
          <p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/<span class="tag">div</span>&gt;</p>
          <p>&nbsp;&nbsp;);</p>
          <p>}</p>
        </div>
      </div>
      <div class="lid-back">
        <div class="brand-glyph"></div>
      </div>
    </div>
    <div class="base">
      <div class="keyboard-well">
        <div class="kb-row"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
        <div class="kb-row"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
        <div class="kb-row"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
        <div class="kb-space"></div>
      </div>
      <div class="trackpad"></div>
      <div class="thumb-notch"></div>
    </div>
  </div>
  <p class="caption">Hover or tap to open display &bull; Pure CSS 3D</p>
</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.

Works with Claude · ChatGPT · Cursor · v0 · Bolt · Gemini

Create a 3D laptop hardware mockup that smoothly opens its screen on hover, using only HTML and CSS (no JavaScript).

Requirements:
- A stage with perspective: 1200px, dark gradient background.
- A "laptop" element transformed in isometric 3D space: rotateX(60deg) rotateZ(-28deg), with transform-style: preserve-3d.
- A "base" element with brushed aluminium gradient, keyboard well with multi-row keys and spacebar, glass trackpad, and front notch.
- A "lid" element hinged along its top edge (transform-origin: top center) with transform-style: preserve-3d, initial transform: rotateX(-75deg) (semi-closed).
- On :hover or :focus-visible of the laptop, transition the lid to rotateX(-105deg) (fully open display) over 0.8s with a realistic cubic-bezier ease.
- The lid has two faces: the inside "screen" with a dark IDE theme, traffic light window dots, and formatted React code, and the outside "lid-back" with an illuminated brand logo.
- Full responsive sizing and prefers-reduced-motion support.

Return one HTML file with a <style> block.

How to build it, step by step

1
Set perspective on the stage and tip the laptop container back in 3D using rotateX and rotateZ.
2
Style the base chassis with a grey aluminium gradient, deep keyboard well, and trackpad.
3
Position the lid at the top edge of the base and set transform-origin: top center so it pivots on its hinge.
4
Rotate the lid backward on hover. Because the origin is on the hinge line, it swings open naturally.
5
Add backface-visibility: hidden to both the screen and the outer lid casing.
6
Style the screen with an editor header and syntax-highlighted code.

Customisation tips

Adjust the hover angle between -95deg and -115deg to match your preferred viewing angle.
Replace the code editor content with an iframe or website preview image to show off portfolio projects.
Works entirely without JavaScript, making it lightweight for hero sections.