← Back to Login Forms

3D Login & Sign Up Form

An immersive 3D experience for user authentication.

3D Portal UI

Project Overview

A premium 3D login and signup form interface with soft shadows, perspective tilt, and vibrant blue and purple gradients. This project showcases advanced CSS 3D transforms and smooth perspective-based interactions.

Open Dashboard →

📄 index.html

How HTML Works:

The HTML structure uses a checkbox-based toggle to switch between login and signup states. The entire form is wrapped in a 3D container to enable the flip animation.

<div class="section">
    <div class="container">
        <div class="row full-height justify-content-center">
            <div class="col-12 text-center align-self-center py-5">
                <div class="section pb-5 pt-5 pt-sm-2 text-center">
                    <h6 class="mb-0 pb-3"><span>User Access </span><span>Register Profile</span></h6>
                    <input class="checkbox" type="checkbox" id="reg-log" name="reg-log" />
                    <label for="reg-log"></label>
                    <div class="card-3d-wrap mx-auto">
                        <div class="card-3d-wrapper">
                            <div class="card-front">
                                ...
                            </div>
                            <div class="card-back">
                                ...
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

🎨 style.css

How CSS Works:

The magic happens with transform-style: preserve-3d and backface-visibility: hidden. When the checkbox is checked, the .card-3d-wrapper rotates 180 degrees, showing the signup side. 

.card-3d-wrap {
  position: relative;
  width: 440px;
  max-width: 100%;
  height: 400px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  perspective: 800px;
  margin-top: 60px;
}

.card-3d-wrapper {
  width: 100%;
  height: 100%;
  position:absolute;    
  top: 0;
  left: 0;  
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: all 600ms ease-out; 
}

.checkbox:checked ~ .card-3d-wrap .card-3d-wrapper {
  transform: rotateY(180deg);
}

How Everything Works Together

1. 3D Transformation: The .card-3d-wrap provides the depth perspective, while the .card-3d-wrapper handles the actual rotation.

2. Checkbox Hack: A hidden checkbox #reg-log acts as the state manager. When checked, CSS selectors use the ~ sibling combinator to rotate the card.

3. Backface Culling: backface-visibility: hidden ensures that the "back" of the elements isn't visible when they are turned away from the user.

4. UI Polish: Custom icons from Unicons and Google Fonts provide a professional, modern aesthetic.

← Back to Login Forms