Design for AIVolteo en hover
Volteo en hover: tarjeta en CSS. Copia las reglas, o el prompt que reproduce el resultado.
Hover to flip
Front side
Back side
Rotates 180deg on the Y axis.
CSS
.card-038 {
width: 260px;
height: 180px;
perspective: 1000px;
font-family: system-ui,sans-serif
}
.card-038__inner {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform .7s cubic-bezier(.4,.2,.2,1)
}
.card-038:hover .card-038__inner {
transform: rotateY(180deg)
}
.card-038__front,.card-038__back {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 16px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden
}
.card-038__front {
background: #fff;
border: 1px solid #e5e7eb;
color: #111827
}
.card-038__back {
background: linear-gradient(135deg,#0ea5e9,#6366f1);
color: #fff;
transform: rotateY(180deg)
}
.card-038 h3 {
margin: 0 0 4px;
font-size: 18px
}
.card-038 p {
margin: 0;
font-size: 13px;
opacity: .8
}
HTML
<div class="card-038">
<div class="card-038__inner">
<div class="card-038__front"><h3>Hover to flip</h3><p>Front side</p></div>
<div class="card-038__back"><h3>Back side</h3><p>Rotates 180deg on the Y axis.</p></div>
</div>
</div>Prompt
Construye una tarjeta de volteo de 260x180px solo con CSS. Envoltorio exterior con perspective 1000px; una caja interior con transform-style preserve-3d que rota rotateY(180deg) en hover durante 700ms con cubic-bezier(.4,.2,.2,1). Dos caras posicionadas de forma absoluta con backface-visibility hidden y radio 16px: la frontal es blanca con borde 1px #e5e7eb y texto #111827, la trasera va prerrotada 180deg y rellena con un degradado a 135deg de #0ea5e9 a #6366f1 con texto blanco. Contenido centrado en ambas caras.