Las tarjetas giratorias son el efecto de las tarjetas que rotarán hasta cierto punto cuando pasas el mouse sobre ellas. Habrá información, enlaces o imágenes en la tarjeta que serán visibles cuando pase el mouse sobre las tarjetas.
En este artículo, aprenderá cómo hacer tarjetas giratorias en su sitio web usando solo HTML y CSS .
Implementación paso a paso:
Paso 1: archivo HTML para la tarjeta
HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content= "width=device-width, initial-scale=1"> </head> <body> <!-- Give a proper heading--> <h1 style="color: green; text-align: center;"> GeeksForGeeks Rotating Card </h1> <div="container"> <!-- create a class to build the structure of card using div--> <div class="card GFG"></div> </div> </body> </html>
Paso 2: Decorar el frente de la tarjeta usando CSS: Hemos construido la estructura de la primera cara de la tarjeta en la parte HTML. Ahora necesitamos diseñar la tarjeta con diferentes propiedades de CSS y la clave es usar la propiedad de transformación de CSS y rotar la tarjeta 45 grados, es decir, transformar: rotar (45 grados) . Entonces, ahora agregue el código CSS escrito a continuación dentro de la etiqueta principal .
.card {
position: absolute;
width: 200px;
height: 200px;
display: inline-block;
border-radius: 10px;
padding: 15px 25px;
box-sizing: border-box;
cursor: pointer;
margin: 10px 15px;
transition: transform 0.5s;
background-position: right;
background-size: cover;
transform: rotate(45deg);
}
.GFG {
margin-top: 170px;
margin-left: 600px;
background-image: url(gfg.jpg);
}
.card:hover {
transform: translateY(-10px);
}
Nota: puede rotar sus tarjetas tanto como sea posible dependiendo de la transformación: rotar (45 grados) y la imagen de fondo está en la carpeta de imágenes y accederemos a esa imagen usando url() y esta url() tomará la dirección del archivo guardado . imagen.
Ejemplo: El código HTML completo se proporciona como ejemplo para su ayuda. Este ejemplo usa transform: la propiedad de rotación (45 grados) para rotar la tarjeta.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<!-- CSS code -->
<style>
.card {
position: absolute;
width: 200px;
height: 200px;
display: inline-block;
border-radius: 10px;
padding: 15px 25px;
box-sizing: border-box;
cursor: pointer;
margin: 10px 15px;
transition: transform 0.5s;
background-position: right;
background-size: cover;
transform: rotate(45deg);
}
.GFG {
margin-top: 170px;
margin-left: 600px;
background-image: url(gfg.jpg);
}
.card:hover {
transform: translateY(-10px);
}
</style>
</head>
<body>
<!-- Give a proper heading-->
<h1 style="color: green; text-align: center;">
GeeksForGeeks Rotating Card
</h1>
<div="container">
<!-- Create a class to build the
structure of card using div-->
<div class="card GFG"></div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por riyamathur y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA