Design for AIInclinación en perspectiva
Inclinación en perspectiva: tarjeta en CSS. Copia las reglas, o el prompt que reproduce el resultado.
Perspective tilt
Rotates in 3D on hover, with the badge floating above the surface.
CSS
.card-037 {
width: 280px;
perspective: 900px;
font-family: system-ui,sans-serif
}
.card-037__in {
position: relative;
padding: 24px;
background: linear-gradient(145deg,#1e293b,#0f172a);
border-radius: 16px;
color: #f8fafc;
transform-style: preserve-3d;
transition: transform .4s ease,box-shadow .4s;
box-shadow: 0 10px 30px rgba(0,0,0,.3);
overflow: hidden
}
.card-037__in::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(115deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.12) 50%,rgba(255,255,255,0) 60%);
transform: translateX(-100%);
transition: transform .6s
}
.card-037:hover .card-037__in {
transform: rotateX(8deg) rotateY(-12deg);
box-shadow: -16px 24px 40px rgba(0,0,0,.4)
}
.card-037:hover .card-037__in::after {
transform: translateX(100%)
}
.card-037__badge {
display: inline-block;
padding: 4px 10px;
border-radius: 8px;
background: #38bdf8;
color: #0f172a;
font-weight: 800;
font-size: 12px;
transform: translateZ(40px)
}
.card-037 h3 {
margin: 14px 0 6px;
font-size: 20px;
transform: translateZ(20px)
}
.card-037 p {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: #94a3b8
}
HTML
<div class="card-037">
<article class="card-037__in">
<span class="card-037__badge">01</span>
<h3>Perspective tilt</h3>
<p>Rotates in 3D on hover, with the badge floating above the surface.</p>
</article>
</div>Prompt
Haz una tarjeta de 280px con ilusión de inclinación 3D. El envoltorio tiene perspective 900px. El panel interior: padding 24px, degradado a 145deg de #1e293b a #0f172a, radio 16px, transform-style preserve-3d, sombra 0 10px 30px rgba(0,0,0,.3). En hover rótalo con rotateX(8deg) rotateY(-12deg) durante 400ms y desplaza la sombra a -16px 24px 40px. Una insignia azul cielo "01" (#38bdf8, radio 8px) se empuja 40px hacia delante con translateZ y el título de 20px 20px hacia delante, para que floten. Un brillo blanco diagonal (banda al 12% de opacidad) barre de izquierda a derecha en hover.