Create 3D Envelope Animation using HTML CSS

Want to spice up your user interface with a fun and interactive element? This 3D Envelope Animation is built using only HTML and CSS—no JavaScript required. When hovered, the envelope flap opens and a message pops out, complete with a notification bubble. This is perfect for:

• Message alerts
• Inbox previews
• Notification center animations
• Interactive email UI demos

HTML Structure

To begin crafting our 3D envelope animation, we need a clean, semantic structure that’s small enough to drop anywhere yet flexible enough for CSS magic. The goal is to layer the envelope parts—the flap, body panels, message card and count badge—so CSS can animate them independently.

<div class="main-container">
    <div class="envelope">
        <div class="msg"><span class="count">4</span></div>
        <div class="top-part"></div>
        <div class="right-part"></div>
        <div class="left-part"></div>
    </div>
</div>

• .main-container: Centers everything on the screen using Flexbox.
• .envelope: The main interactive element styled to look like a mail envelope.
• .top-part: Represents the opening flap of the envelope.
• .left-part & .right-part: Give the envelope a 3D appearance using clipped background shades.
• .msg: The message block that pops up.
• .count: Notification badge for unread messages.

With this concise HTML scaffold in place, every piece of the envelope has its own layer. That separation gives the upcoming CSS full control over individual transitions—ensuring the flap, message card and badge animate in a smooth, coordinated sequence.

CSS Styling and Effects

Now the fun begins: styling and animating. We’ll rely on 3‑D transforms, clip‑paths for the angled sides and timed transitions to create a believable mail‑opening effect—all while keeping file size low and performance high.

.main-container,
.envelope {
    display: flex;
    justify-content: center;
}

.main-container {
    min-height: 100vh;
    align-items: center;
    min-width: 200px;
}

.envelope {
    width: 160px;
    height: 80px;
    cursor: pointer;
    position: relative;
    perspective: 1000px;
    background: #0d305e;
    border-radius: 0 0 10px 10px;
    transform-style: preserve-3d;
}

.msg {
    bottom: 0;
    width: 80%;
    height: 80%;
    color: white;
    transition: .5s;
    position: absolute;
    text-align: center;
    border-radius: 5px;
    background: #dddddd;
}

.msg::before,
.msg::after {
    content: '';
    left: 5%;
    height: 10px;
    position: absolute;
    border-radius: 50px;
    background: #cbcbcb;
}

.msg::before {
    top: 15%;
    width: 42%;
}

.msg::after {
    top: 40%;
    width: 50%;
}

.count {
    top: -15%;
    right: -10%;
    width: 25px;
    height: 25PX;
    font-size: 20px;
    opacity: 0;
    font-weight: 600;
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    font-family: calibri;
    background: #f46868;
    box-shadow: 0px 0px 2px 1px #47464661;
    transition: transform 1s .5s, opacity 1s .5s;
}

.left-part,
.right-part {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 4;
    bottom: 0%;
    filter: drop-shadow(0px 0px 1px rgb(0, 0, 0));
}

.left-part::before,
.right-part::before,
.top-part::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 0 0 10px 10px;
}

.left-part::before {
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    background: #0b2a66;
}

.right-part::before {
    background: #1d3c7b;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.top-part {
    width: 100%;
    height: 50%;
    position: absolute;
    transition: 1s .2s;
    transform-origin: top;
    transform: rotateX(1deg);
    filter: drop-shadow(0px 1px 1px rgb(0, 0, 0, .8));
}

.top-part::before {
    clip-path: polygon(0 0, 100% 0, 50% 100%, 0 0);
    background: #011e43;
}

.envelope:hover .msg {
    transform: translateY(-50px);
    transition: 1.5s .2s !important;
    z-index: 3;
}

.envelope:hover .count {
    transform: scale(1);
    opacity: 1;
}

.envelope:hover .top-part {
    transform: rotateX(190deg);
    transition: .5s !important;
    filter: none;
}

• The flap uses rotateX() for a 3D flip effect.
• These create visual depth by mimicking shadows on each side of the envelope.
• The message box animates upward on hover.
• The badge smoothly scales into view with a delay, creating a polished entrance.
• When the envelope is hovered:
  • The flap flips open (3D effect using rotateX)
  • The message floats up
  • The unread message count appears
• All animations are timed using transition delays for a sequential feel.

By orchestrating transition delays and separate transform origins, the envelope opens in a natural order: flap, card, then badge. Because every movement is handled by GPU‑accelerated CSS transforms, the animation remains buttery smooth—even on low‑power devices—with zero JavaScript overhead.

Use Cases

You can use this envelope animation in:

• Contact sections to reveal emails
• Notification indicators on dashboards
• Email previews in inbox UIs
• Gamified web interfaces for message unlocks

Final Thoughts

This 3D Envelope Animation is more than just a fun visual—it’s a smart, scalable UI component that adds life to otherwise static message interfaces. You can enhance it further by integrating JavaScript to open the envelope on click, fetch message data dynamically or link it with real email notifications.

Live Preview