Preview:
<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8"> 
    <title>Social Media Icons Hover Effect</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css"> 
</head>
<body>
    <div class="social-icons-container">
        <div class="social-icon-box facebook">
            <div class="icon-face">
                <i class="fa fa-facebook"></i> 
            </div>
        </div>
        <div class="social-icon-box twitter">
            <div class="icon-face">
                <i class="fa fa-twitter"></i>
            </div>
        </div>
        <div class="social-icon-box instagram">
            <div class="icon-face">
                <i class="fa fa-instagram"></i>
            </div>
        </div>
        <div class="social-icon-box linkedin">
            <div class="icon-face">
                <i class="fa fa-linkedin"></i>
            </div>
        </div>
        <div class="social-icon-box github">
            <div class="icon-face">
                <i class="fa fa-github"></i>
            </div>
        </div>
    </div>
</body>
</html>







body {
	margin: 0;
	padding: 0;
	background: url(a1.jpg); 
	background-size: cover;
	background-position: center center;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}
.social-icons-container {
	display: flex;
}
.social-icon-box {
	width: 100px;
	height: 100px;
	margin: 10px;
	overflow: hidden;
	position: relative;
	perspective: 1000px;
	border-radius: 15px;
}
.social-icon-box i {
	font-size: 50px;
	color: #fff;
	transition: transform 0.8s;
	transform-style: preserve-3d;
}
.social-icon-box:hover i {
	transform: rotateX(360deg);
}
.social-icon-box:hover {
	cursor: pointer;
	animation: animate .9s ease-in infinite;
}
.social-icon-box .icon-face {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}
.social-icon-box.facebook {
	background: #1877f2;
}
.social-icon-box.twitter {
	background: #1da1f2;
}
.social-icon-box.instagram {
	background: #e1306c;
}
.social-icon-box.linkedin {
	background: #0077b5;
}
.social-icon-box.github {
	background: #333;
}
@keyframes animate {
	0%, 100% {
		transform: translateY(-6px);
	}
	50% {
		transform: translateY(0);
	}
}
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter