Book Style LogIn/SignUp Animation

AI Overview: Book Style LogIn/SignUp Animation

This project is an interactive web component that transforms a standard login and registration process into a visually engaging "book-flipping" experience. Instead of simply switching between two static pages, the interface uses 3D animations to simulate a book cover opening and closing. This provides a smooth, modern transition that guides the user from a "Welcome" screen to either a login form or a sign-up form.

The project is built using a layered HTML structure within a central container. There are four main parts: the login form, the registration form, and a two-sided "page" (front and back) that acts as the moving cover. By using CSS 3D transforms, the "page" is positioned on top of the forms and rotates around its left edge, mimicking the spine of a book.

<div id="container">
    <div class="login">...</div>
    <div class="page front">...</div>
    <div class="page back">...</div>
    <div class="register">...</div>
</div>

The HTML structure above organizes the forms and the animated "pages" into layers that can be manipulated independently.

The logic is driven by a very small JavaScript snippet that listens for button clicks. When a user clicks "Register" or "Log In," the script changes the class name of the main container to either active or close. This simple state change acts as a trigger for the complex CSS animations defined in the stylesheet.

registerButton.onclick = function(){
     container.className = 'active'
}

This JavaScript function updates the container's class to "active," which signals the CSS to begin the flipping animation.

The "magic" of the flip happens in the CSS using keyframe animations and 3D properties. The perspective property on the body creates a sense of depth, while the rotateY transformation handles the actual swinging motion of the page. To ensure the flip looks realistic, the transform-origin is set to the left side, acting as the book's hinge.

@keyframes rot-front {
  from { transform: translateZ(2px) rotateY(0deg); }
  to { transform: translateZ(1px) rotateY(-180deg); }
}

This CSS keyframe rule defines the motion of the front cover as it swings 180 degrees to the left to reveal the registration form underneath.