Carte 3D

252 sergioarmijo30

Ouvrir dans l'éditeur Publiez votre code

Recommandé

27 May 2025

Carte Plan Anes

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);
}

Carte 3D

Recommandé

Carte de paiement

Page de connexion 3D

Carte Plan Anes

HTML

CSS

JS

Recommandé

Carte de paiement

Page de connexion 3D

Carte Plan Anes

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS