Hola!.
Vamos a ver como podemos crear desde 0 iconos en 3D usando CSS.
Como se aprecia en el resultado final, hacemos uso de Font Awesome. Podéis usar vuestros propios estilos. La imaginación no tiene limite.
Hacemos uso de la propiedad transform, como la que más peso va a tener en la creación de nuestro botón.
Y aquí el código para poder implementar nuestro/s iconos:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #cdcccc;
display: flex;
justify-content: center;
align-items: center;
min-height: 90vh;
font-family: Arial, Helvetica, sans-serif;
}
.icons{
position: relative;
width: 200px;
height: 400px;
transform: rotate(-37.5deg) skewX(10deg);
box-shadow: -35px 35px 50px rgba(0,0,0,1);
transition: .5s;
}
.icons:hover{
background: #285e97;
transform: rotate(-37.5deg) skewX(10deg)
translate(20px, -20px);
box-shadow: -50px 50px 100px rgba(0,0,0,1);
color: #2196f3;
}
.icons:before{
content: '';
width: 25px;
height: 100%;
top: 0;
left: 0;
background: #9b9797;
position: absolute;
transform: skewY(-45deg) translate(-24px, -12px);
box-shadow: inset -10px 0 20px rgba(0,0,0,.2);
}
.icons:after{
content: '';
width: 100%;
height: 25px;
bottom: 0;
left: 0;
background: #ccc;
transform: skewX(-45deg) translate(12px,24px);
box-shadow: inset -10px 0 20px rgba(0,0,0,.2);
}
.fb{
color: black;
position: absolute;
font-size: 64px;
top: 32%;
left: 38%;
transition: .5s;
}
.fb:hover{
color: white;
position: absolute;
top: 32%;
left: 38%;
cursor: pointer;
}
En nuestro archivo html, crearemos un div, con el icono deseado.
Y listo, ya tendremos nuestro icono 3D.
