3D Card Flip Login and Signup Switch

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="flip-container"><input type="checkbox" id="card-flip-toggle" class="flip-checkbox"><div class="flip-card"><form class="card-face face-front" onsubmit="return false;"><h3>Sign In</h3><input type="email" placeholder="Email"><input type="password" placeholder="Password"><button type="submit">Login</button><label for="card-flip-toggle" class="switch-btn">Need account? Sign Up</label></form><form class="card-face face-back" onsubmit="return false;"><h3>Create Account</h3><input type="text" placeholder="Full Name"><input type="email" placeholder="Email"><button type="submit">Register</button><label for="card-flip-toggle" class="switch-btn">Have account? Sign In</label></form></div></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.flip-container { width: 210px; height: 210px; perspective: 1000px; margin: auto; font-family: system-ui, sans-serif; }
.flip-checkbox { display: none; }
.flip-card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.flip-checkbox:checked ~ .flip-card { transform: rotateY(180deg); }
.card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; background: #ffffff; border-radius: 16px; padding: 18px; box-sizing: border-box; box-shadow: 0 15px 35px rgba(0,0,0,0.08); text-align: center; display: flex; flex-direction: column; justify-content: center; }
.face-back { transform: rotateY(180deg); }
.card-face h3 { margin: 0 0 10px; font-size: 13px; font-weight: 800; color: #0f172a; }
.card-face input { width: 100%; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px 8px; font-size: 8px; color: #0f172a; outline: none; margin-bottom: 6px; box-sizing: border-box; }
.card-face button { width: 100%; background: #2563eb; color: #fff; border: none; border-radius: 6px; padding: 7px; font-size: 8px; font-weight: 800; cursor: pointer; margin-top: 2px; }
.switch-btn { margin-top: 8px; font-size: 7px; color: #64748b; font-weight: 700; cursor: pointer; text-decoration: underline; }