Cartão 3D

276 sergioarmijo30

Abrir no Editor Publique Seu Código

Recomendado

17 July 2025

Formulário de inscrição de login rotativo 3D HTML CSS

2 March 2025

informações do cartão

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  background: linear-gradient(135deg, #0787ffd1, #8494f1);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Segoe UI', sans-serif;
}

.contenedor {
  width: 300px;
  height: 400px;
  perspective: 1500px;
}

.carta {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 25px;
  backdrop-filter: blur(12px);
  box-shadow: 0 50px 100px rgba(0, 0, 0, 0.3);
  transition: transform 0.1s ease-out;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contenido {
  transform: translateZ(60px);
  text-align: center;
  color: #f1f1f1;
}

.contenido h1 {
  font-size: 1.8rem;
  color: #ffffff;
  text-shadow: 0 0 10px #ffffffaa;
}

.contenido p {
  margin-top: 10px;
  font-size: 1rem;
  color: #dddddd;
}

.contenido button {
  margin-top: 20px;
  padding: 10px 20px;
  background: linear-gradient(to right, #ffffff, #d9d9d9);
  color: #222;
  border: none;
  border-radius: 15px;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.3s;
}

.contenido button:hover {
  transform: scale(1.05);
  background: linear-gradient(to right, #eeeeee, #ffffff);
}

Cartão 3D

Recomendado

Formulário de inscrição de login rotativo 3D HTML CSS

Cartão Flip

informações do cartão

HTML

CSS

JS

Recomendado

Formulário de inscrição de login rotativo 3D HTML CSS

Cartão Flip

informações do cartão

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS