Tarjeta de anotación 3D Hover: al pasar el mouse sobre la tarjeta, se mostrará otra tarjeta en efecto 3D en la parte superior, la tarjeta también posee un efecto de inclinación. Este efecto se puede crear usando la biblioteca vanilla-tilt.js y CSS .
Instalación: Esto se puede instalar usando un administrador de paquetes de Nodes (npm) o agregando el enlace CDN en el código.
-
comando npm:
npm install vanilla-tilt
-
Enlace CDN:
https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js
Ejemplo: el siguiente ejemplo usa tilt.js para crear una tarjeta de efecto de desplazamiento 3D.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<!--CDN Link-->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js">
</script>
<style>
.parent_box {
top: 30px;
left: 30px;
position: relative;
width: 300px;
height: 230px;
margin: 10px 0;
transform-style: preserve-3d;
background-color: green;
color: white;
}
.parent_box:hover {
box-shadow: 0 50px 80px rgba(0, 0, 0, 0.2);
}
.parent_box .base_element {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.parent_box .content_box {
background-color: white;
position: absolute;
top: 30%;
left: 40px;
right: 40px;
font-weight: 700;
font-size: 20px;
color: green;
text-align: center;
transform: translateZ(20px) scaleY(0);
padding: 40px 25px;
transform-origin: top;
transform: 0.5s;
transform-style: preserve-3d;
}
.parent_box:hover .content_box {
transform: translateZ(50px) scaleY(1);
}
</style>
</head>
<body>
<div class="parent_box" data-tilt data-tilt-scale="1.1">
<!-- Initial Element-->
<div class="Base_element">
You Are On
</div>
<!--Element To Be Showed On Hovering-->
<div class="content_box">
Geeks For Geeks
</div>
</div>
<script type="text/javascript">
VanillaTilt.init(document.querySelectorAll(".parent_box"), {
// max tilt rotation (degrees)
max: 25,
// Speed of the enter/exit transition
speed: 400,
});
</script>
</body>
</html>
Producción:
Tarjeta de anotación flotante 3D
Publicación traducida automáticamente
Artículo escrito por vivshubham y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA