Carta 3D

275 sergioarmijo30

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

23 May 2025

Effetto cornice fotografica CSS 3D per immagini

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

Carta 3D

Consigliato

Menu hamburger di accesso 3D

Un codice di ytr3d3

Effetto cornice fotografica CSS 3D per immagini

HTML

CSS

JS

Consigliato

Menu hamburger di accesso 3D

Un codice di ytr3d3

Effetto cornice fotografica CSS 3D per immagini

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS