3D Holographic Login Form HTML

622 StormFallGame

Remix Open In Editor Fullscreen Discuss Publish Your Code

<div class="scene">
        <div class="hologram-cube">
            
            
            <div class="panel front-panel">
                <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                    <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                </svg>
                <h3 style="letter-spacing: 3px; margin-top: 20px;">SYSTEM LOCKED</h3>
                <p style="font-size: 12px; opacity: 0.7;">[ HOVER TO INITIALIZE ]</p>
            </div>

<form class="panel login-panel">
                <h2>Access Node</h2>
                
                <div class="input-group">
                    <input type="text" id="username" required autocomplete="off">
                    <label for="username">Neural ID</label>
                </div>
                
                <div class="input-group">
                    <input type="password" id="password" required>
                    <label for="password">Decryption Key</label>
                </div>
                
                <button type="submit">Login</button>
            </form>

</div>
    </div>

</body>
</html>

CSS

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #050508;
    background-image: radial-gradient(circle at center, #0f1520 0%, #000 100%);
    font-family: 'Courier New', Courier, monospace;
    overflow: hidden;
}

/* 3D Scene Setup */
.scene {
    width: 320px;
    height: 320px;
    perspective: 1200px;
}

.hologram-cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    /* Springy, unusual rotation curve */
    transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1.4); 
}

/* Trigger the 3D roll on hover or when an input is focused */
.scene:hover .hologram-cube,
.hologram-cube:focus-within {
    transform: rotateX(90deg);
}

/* Shared Panel Styling */
.panel {
    position: absolute;
    width: 320px;
    height: 320px;
    background: rgba(0, 255, 255, 0.03);
    border: 1px solid rgba(0, 255, 255, 0.3);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.1) inset, 
                0 0 20px rgba(0, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Front Face (Idle State) */
.front-panel {
    transform: rotateY(0deg) translateZ(160px);
    color: #0ff;
    text-shadow: 0 0 15px #0ff;
    animation: hologram-pulse 2s infinite alternate;
}

/* Bottom Face (The Actual Form) */
.login-panel {
    /* Rotated to be the floor, pushed down by half its height */
    transform: rotateX(-90deg) translateZ(160px);
    padding: 40px;
    background: rgba(15, 5, 25, 0.4);
    border-color: rgba(255, 0, 255, 0.4);
    box-shadow: 0 0 30px rgba(255, 0, 255, 0.1) inset, 
                0 0 20px rgba(255, 0, 255, 0.1);
}

/* Form Elements Styling */
h2 {
    color: #f0f;
    text-transform: uppercase;
    letter-spacing: 5px;
    margin-top: 0;
    margin-bottom: 35px;
    text-shadow: 0 0 15px #f0f;
}

.input-group {
    position: relative;
    width: 100%;
    margin-bottom: 30px;
}

input {
    width: 100%;
    padding: 10px 0;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(255, 0, 255, 0.3);
    color: #fff;
    font-size: 16px;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

input:focus {
    border-bottom-color: #0ff;
    box-shadow: 0 10px 10px -10px #0ff;
}

label {
    position: absolute;
    top: 10px;
    left: 0;
    color: rgba(255, 0, 255, 0.6);
    pointer-events: none;
    transition: 0.3s ease all;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 2px;
}

/* Float the label up when input is focused or filled */
input:focus ~ label,
input:valid ~ label {
    top: -18px;
    font-size: 10px;
    color: #0ff;
    text-shadow: 0 0 8px #0ff;
}

button {
    width: 100%;
    padding: 15px;
    background: transparent;
    border: 1px solid #f0f;
    color: #f0f;
    font-family: inherit;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 4px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.2) inset;
    margin-top: 10px;
}

button:hover {
    background: #f0f;
    color: #000;
    box-shadow: 0 0 20px #f0f, 0 0 40px #f0f;
    border-color: #fff;
}

/* Animations */
@keyframes hologram-pulse {
    0% { 
        opacity: 0.7; 
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.1) inset; 
    }
    100% { 
        opacity: 1; 
        box-shadow: 0 0 50px rgba(0, 255, 255, 0.4) inset, 0 0 10px rgba(0, 255, 255, 0.3); 
    }
}

3D Holographic Login Form HTML

Recommended