Tarjeta 3D

1,257 sergioarmijo30

Abrir en el editor Publica tu código

Recomendado

14 October 2023

Panel de tarjetas

20 August 2024

Tarjeta de bicicleta Pure CSS

30 March 2025

Un código de ytr3d3

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