3D Flip Card

jitesh208
Jan 28, 2026 2
Live Preview

Live Editor

<div class="flip-wrap">
  <div class="flip-card">

    <!-- FRONT -->
    <div class="face front">
      <div class="icon">⚡</div>
      <h3>Smart Automation</h3>
      <p>
        Automate repetitive workflows with intelligent triggers and actions.
      </p>
      <span class="tag">AI Powered</span>
    </div>

    <!-- BACK -->
    <div class="face back">
      <h3>What you get</h3>
      <ul>
        <li>No-code workflow builder</li>
        <li>Real-time analytics</li>
        <li>Instant integrations</li>
      </ul>
      <button>Explore Feature</button>
    </div>

  </div>
</div>
*{
  box-sizing:border-box;
  font-family:'Inter',sans-serif;
}

body{
  min-height:100vh;
  display:grid;
  place-items:center;
  background:#f4f6fb;
}

/* Scene */
.flip-wrap{
  width:300px;
  height:280px; /* under 300px */
  perspective:1200px;
}

/* Card */
.flip-card{
  width:100%;
  height:100%;
  position:relative;
  transform-style:preserve-3d;
  transition:transform .9s cubic-bezier(.4,.2,.2,1);
}

.flip-wrap:hover .flip-card{
  transform:rotateY(180deg);
}

/* Faces */
.face{
  position:absolute;
  inset:0;
  border-radius:20px;
  backface-visibility:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.18);
  padding:24px;
  display:flex;
  flex-direction:column;
}

/* FRONT */
.front{
  background:linear-gradient(135deg,#ffffff,#f0f3ff);
}

.icon{
  width:56px;
  height:56px;
  border-radius:16px;
  background:linear-gradient(135deg,#6b7cff,#9f7bff);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:26px;
  margin-bottom:18px;
}

.front h3{
  font-size:20px;
  margin-bottom:8px;
}

.front p{
  font-size:14px;
  color:#666;
  line-height:1.4;
}

.tag{
  margin-top:auto;
  display:inline-block;
  padding:6px 12px;
  font-size:12px;
  border-radius:999px;
  background:#eef0ff;
  color:#4a5cff;
  font-weight:600;
  width:max-content;
}

/* BACK */
.back{
  background:linear-gradient(135deg,#111827,#1f2937);
  color:#fff;
  transform:rotateY(180deg);
}

.back h3{
  font-size:22px;
  margin-bottom:10px;
}

.back ul{
  padding-left:18px;
  font-size:14px;
  opacity:.9;
  line-height:1.6;
}

.back button{
  margin-top:auto;
  background:#fff;
  color:#111;
  border:none;
  padding:12px;
  border-radius:14px;
  font-weight:600;
  cursor:pointer;
  transition:.2s ease;
}

.back button:hover{
  transform:translateY(-2px);
}
Categories

3D Flip Card

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
