WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
4493
Andev.web
Abrir no Editor
Publique Seu Código
Recomendado
12 July 2025
animação
24 January 2025
Caixa de login/inscrição de rotação 3D
HTML
Copy
Log in
Let`s go!
Sign up
Confirm!
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); * { font-family: 'Poppins', sans-serif; } .container { display: flex; align-items: center; justify-content: center; height: 100vh; .wrapper { --input-focus: #f02df0; --font-color: #323232; --font-color-sub: #666; --bg-color: #fff; --bg-color-alt: #666; --main-color: #323232; /* display: flex; */ /* flex-direction: column; */ /* align-items: center; */ } /* switch card */ .switch { transform: translateY(-200px); position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px; width: 50px; height: 20px; } /*Andev Web*/ .card-side::before { position: absolute; content: 'Log in'; left: -70px; top: 0; width: 100px; text-decoration: underline; color: var(--font-color); font-weight: 600; } .card-side::after { position: absolute; content: 'Sign up'; left: 70px; top: 0; width: 100px; text-decoration: none; color: var(--font-color); font-weight: 600; } .toggle { opacity: 0; width: 0; height: 0; } .slider { box-sizing: border-box; border-radius: 5px; border: 2px solid var(--main-color); box-shadow: 4px 4px var(--main-color); position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--bg-colorcolor); transition: 0.3s; } .slider:before { box-sizing: border-box; position: absolute; content: ""; height: 20px; width: 20px; border: 2px solid var(--main-color); border-radius: 5px; left: -2px; bottom: 2px; background-color: var(--bg-color); box-shadow: 0 3px 0 var(--main-color); transition: 0.3s; } .toggle:checked + .slider { background-color: var(--input-focus); } .toggle:checked + .slider:before { transform: translateX(30px); } .toggle:checked ~ .card-side:before { text-decoration: none; } .toggle:checked ~ .card-side:after { text-decoration: underline; } /* card */ .flip-card__inner { width: 300px; height: 350px; position: relative; background-color: transparent; perspective: 1000px; /* width: 100%; height: 100%; */ text-align: center; transition: transform 0.8s; transform-style: preserve-3d; } .toggle:checked ~ .flip-card__inner { transform: rotateY(180deg); } .toggle:checked ~ .flip-card__front { box-shadow: none; } .flip-card__front, .flip-card__back { padding: 20px; position: absolute; display: flex; flex-direction: column; justify-content: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: lightgrey; gap: 20px; border-radius: 5px; border: 2px solid var(--main-color); box-shadow: 4px 4px var(--main-color); } .flip-card__back { width: 100%; transform: rotateY(180deg); } .flip-card__form { display: flex; flex-direction: column; align-items: center; gap: 20px; } .title { margin: 20px 0 20px 0; font-size: 25px; font-weight: 900; text-align: center; color: var(--main-color); } .flip-card__input { width: 250px; height: 40px; border-radius: 5px; border: 2px solid var(--main-color); background-color: var(--bg-color); box-shadow: 4px 4px var(--main-color); font-size: 15px; font-weight: 600; color: var(--font-color); padding: 5px 10px; outline: none; } .flip-card__input::placeholder { color: var(--font-color-sub); opacity: 0.8; } .flip-card__input:focus { border: 2px solid var(--input-focus); } .flip-card__btn:active, .button-confirm:active { box-shadow: 0px 0px var(--main-color); transform: translate(3px, 3px); } .flip-card__btn { margin: 20px 0 20px 0; width: 120px; height: 40px; border-radius: 5px; border: 2px solid var(--main-color); background-color: var(--bg-color); box-shadow: 4px 4px var(--main-color); font-size: 17px; font-weight: 600; color: var(--font-color); cursor: pointer; }
JS
Copy