A Code by Metehan

1,833 Metehan

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>3D Login & Register</title>
  <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"/>
  <style>
    * {
      font-family: 'Arial', sans-serif;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: url('https://media.istockphoto.com/id/1201190921/tr/foto%C4%9Fraf/atmosferik-y%C4%B1ld%C4%B1zl%C4%B1-g%C3%B6ky%C3%BCz%C3%BCne-kar%C5%9F%C4%B1-f%C3%BCt%C3%BCristik-%C5%9Fehir.jpg?s=612x612&w=0&k=20&c=H71-oA-enKfclbY_5M77pmPRWjJ_a8vSJto1ZZ5HuwM=') no-repeat center center / cover;
      perspective: 1000px;
      overflow: hidden;
    }

body::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(2px);
      z-index: 0;
    }

#credits {
      position: fixed;
      bottom: 10px;
      right: 10px;
      color: rgba(255, 255, 255, 0.8);
      font-size: 12px;
      z-index: 1000;
    }

.form-container {
      position: relative;
      width: 420px;
      height: 500px;
      transform-style: preserve-3d;
      transition: transform 0.8s ease;
      z-index: 10;
      animation: float 6s ease-in-out infinite;
    }

.form-container.flipped {
      transform: rotateY(180deg);
    }

.form-side {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 20px;
      padding: 40px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(20px);
      border: 2px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
      color: #fff;
      transform: translateZ(50px);
    }

.register-side {
      transform: rotateY(180deg) translateZ(50px);
    }

.form-side h1 {
      font-size: 32px;
      text-align: center;
      margin-bottom: 30px;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
      background: linear-gradient(45deg, #fff, #e0e0e0);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

.input-box {
      position: relative;
      width: 100%;
      height: 50px;
      margin: 25px 0;
    }

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

.input-box input:focus {
      border-color: rgba(255, 255, 255, 0.6);
      background: rgba(255, 255, 255, 0.15);
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    }

.input-box input::placeholder {
      color: rgba(255, 255, 255, 0.7);
    }

.input-box i {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 20px;
      color: rgba(255, 255, 255, 0.7);
    }

.remember-forgot {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      margin: 20px 0;
    }

.remember-forgot label {
      display: flex;
      align-items: center;
    }

.remember-forgot input[type="checkbox"] {
      margin-right: 8px;
      transform: scale(1.2);
    }

.remember-forgot a {
      color: rgba(255, 255, 255, 0.8);
      text-decoration: none;
    }

.remember-forgot a:hover {
      color: #fff;
    }

.btn {
      width: 100%;
      height: 50px;
      background: linear-gradient(45deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
      border: none;
      border-radius: 10px;
      font-size: 16px;
      font-weight: 600;
      color: #333;
      cursor: pointer;
      margin: 20px 0;
    }

.btn:hover {
      background: linear-gradient(45deg, #fff, rgba(255, 255, 255, 0.9));
    }

.switch-link {
      font-size: 14px;
      text-align: center;
      margin-top: 15px;
    }

.switch-link a {
      color: #fff;
      text-decoration: none;
      font-weight: 600;
      cursor: pointer;
    }

@keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-10px); }
    }

@media (max-width: 480px) {
      .form-container {
        width: 90%;
        margin: 0 auto;
      }

.form-side {
        padding: 30px 25px;
      }
    }
  </style>
</head>
<body>
  <div id="credits">Made by pan4o</div>

<div class="form-container" id="formContainer">
    
    <div class="form-side login-side">
      <form>
        <h1>Giriş Yap</h1>
        <div class="input-box">
          <input type="text" placeholder="Kullanıcı Adı" required>
          <i class='bx bxs-user'></i>
        </div>
        <div class="input-box">
          <input type="password" placeholder="Şifre" required>
          <i class='bx bxs-lock-alt'></i>
        </div>
        <div class="remember-forgot">
          <label><input type="checkbox"> Beni Hatırla</label>
          <a href="#">Şifremi unuttum</a>
        </div>
        <button type="submit" class="btn">Giriş Yap</button>
        <div class="switch-link">
          <p>Hesabınız yok mu? <a onclick="flipForm()">Kayıt Ol!</a></p>
        </div>
      </form>
    </div>

<div class="form-side register-side">
      <form>
        <h1>Kayıt Ol</h1>
        <div class="input-box">
          <input type="text" placeholder="Ad Soyad" required>
          <i class='bx bxs-user'></i>
        </div>
        <div class="input-box">
          <input type="email" placeholder="Email" required>
          <i class='bx bxs-envelope'></i>
        </div>
        <div class="input-box">
          <input type="password" placeholder="Şifre" required>
          <i class='bx bxs-lock-alt'></i>
        </div>
        <div class="input-box">
          <input type="password" placeholder="Şifreyi Onayla" required>
          <i class='bx bxs-lock-alt'></i>
        </div>
        <button type="submit" class="btn">Kayıt Ol</button>
        <div class="switch-link">
          <p>Zaten hesabınız var mı? <a onclick="flipForm()">Giriş Yap!</a></p>
        </div>
      </form>
    </div>
  </div>

document.addEventListener('mouseleave', function() {
      const container = document.getElementById('formContainer');
      container.style.transform = 'rotateY(0deg) rotateX(0deg)';
    });
  </script>
</body>
</html>

CSS

A Code by Metehan

Recommended