Tarjeta 3D con Hover
Categoría: Tarjetas
Tarjeta con efecto 3D al pasar el ratón
Vista Previa:
Tarjeta 3D
Pasa el ratón para ver el efecto 3D
📚 Explicación del Efecto:
Usa transform-style: preserve-3d y perspective para crear un efecto de profundidad al rotar la tarjeta.
Código Exportable
CSS
HTML
.tarjeta-3d {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: all 0.5s ease;
transform-style: preserve-3d;
perspective: 1000px;
}
.tarjeta-3d:hover {
transform: rotateY(10deg) translateY(-5px);
box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}<div class="tarjeta-3d">
<h3>Tarjeta 3D</h3>
<p>Pasa el ratón para ver el efecto 3D</p>
</div>