La creación de efectos 3D es una de las necesidades más exigentes en el diseño web. Botón 3D Flip En este efecto, cada vez que el usuario pase el mouse sobre un botón, se mostrará una animación de un giro con aspecto 3D.
Código HTML: en esta sección, usaremos la etiqueta de anclaje y CSS para diseñar el botón.
HTML
<!DOCTYPE html> <html> <body> <a href="#"> <span>GeeksForGeeks</span> </a> </body> </html>
Sección CSS: En esta sección, usaremos algunas propiedades CSS para crear el efecto 3D.
La propiedad transform-style se usa para definir que el efecto debe conservar el posicionamiento 3D para que el efecto se vea correcto. El selector :hover r se puede usar para seleccionar el hipervínculo y usar la propiedad de transformación . El valor de rotarX() se usa para rotar el botón cada vez que se pasa el mouse sobre el botón.
Código CSS:
CSS
<style>
body {
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
background: white;
}
a {
position: relative;
padding: 20px 40px;
background: black;
color: white;
text-decoration: none;
transform-style: preserve-3d;
transition: ease-in-out 3s;
}
a:hover {
transform: rotateX(360deg);
}
a span {
display: block;
font-weight: bold;
transform-style: preserve-3d;
}
</style>
Código completo: en esta sección, combinaremos las dos secciones anteriores para crear un efecto completo.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
background: white;
}
a {
position: relative;
padding: 20px 40px;
background: black;
color: white;
text-decoration: none;
transform-style: preserve-3d;
transition: ease-in-out 3s;
}
a:hover {
transform: rotateX(360deg);
}
a span {
display: block;
font-weight: bold;
transform-style: preserve-3d;
}
</style>
</head>
<body>
<a href="#">
<span>GeeksForGeeks</span>
</a>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por ritikumariupadhyay24 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA