WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Tarjeta animada con efecto de desplazamiento 3D
2224
Andev.web
Abrir en el editor
Publica tu código
Recomendado
28 September 2025
Ejemplo de animación de carga CSS
8 March 2024
Plantilla de barra de navegación HTML CSS
5 September 2024
Generador de contraseñas (NEGRO)
HTML
Copy
Andev web
Kratos
Zeus
CSS
Copy
@font-face { font-family: "Exoct"; src: url("https://assets.codepen.io/1480814/films.EXH_____.ttf") } figure { width: 100%; aspect-ratio: 1; margin: 0 0 60px; padding: 5px 20px 0; box-sizing: border-box; display: grid; grid-template-rows: 100%; cursor: pointer; position: relative; filter: drop-shadow(0 0 20px rgb(0 0 0/50%)); } figure:before { content: ""; position: absolute; z-index: -1; inset: 0; background: top/cover; transform-origin: bottom; filter: brightness(.9); transition: .5s; } figure:before { background-image: url(https://assets.codepen.io/1480814/necro-back.jpg) } figure + figure:before { background-image: url(https://assets.codepen.io/1480814/druid-bac.jpg) } img { grid-area: 1/1; width: 100%; height: 100%; object-fit: cover; object-position: top; filter: contrast(.8) brightness(.7); place-self: end center; transition: .5s; } figcaption { grid-area: 1/1; width: calc(100% + 40px); font-family: Exoct; color: #fff; font-size: min(32px,5vmin); text-align: center; place-self: end center; transform: perspective(500px) translateY(100%) rotateX(-90deg); backface-visibility: hidden; transform-origin: top; background: #000; transition: .5s; } figure:hover img { width: 130%; height: 255%; filter: contrast(1); } figure:hover::before { filter: brightness(.3); transform: perspective(500px) rotateX(60deg); } figure:hover figcaption{ transform: perspective(500px)translateY(100%) rotateX(-30deg); } body { margin: 0; min-height: 100vh; display: grid; grid-auto-flow: column; grid-auto-columns: min(230px,35vmin); place-content: end center; gap: 50px; background: linear-gradient(#0000,rgb(50 50 50 / 88%)), url(https://img.redbull.com/images/q_auto,f_auto/redbullcom/2021/5/14/mkencvxlnzi4vej7c1js/muspelheim-god-of-war-mountain) top/cover; }
JS
Copy
//This code does not need javascript:)