कार्ड 3D

870 sergioarmijo30

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

14 October 2023

सोशल मीडिया का एनिमेटेड कार्ड

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

कार्ड 3D

अनुशंसित

कार्ड डैशबोर्ड

होवर फिल कार्ड

सोशल मीडिया का एनिमेटेड कार्ड

HTML

CSS

JS

अनुशंसित

कार्ड डैशबोर्ड

होवर फिल कार्ड

सोशल मीडिया का एनिमेटेड कार्ड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS