<!DOCTYPE html>
<html>
<head>
<title>Simple Cube Loading Pure Css3 Animation</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
	<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>



	<div class="shadow">
		<div class="Social">
			<div>
				<i class='fab fa-facebook-f'></i>
			</div>
			<div>
				<i class='fab fa-instagram'></i>
			</div>
			<div>
				<i class='fab fa-whatsapp'></i>
			</div>
			<div>
				<i class='fab fa-twitter'></i>
			</div>
			<div>
				<i class="fab fa-linkedin-in"></i>
			</div>
			<div>
				<i class="fab fa-youtube"></i>
			</div>
				
		</div>
	</div>

</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&display=swap');
*, html,body{
	padding:0px;
	margin:0px;
	box-sizing:border-box;
	font-family:'Poppins', sans-serif;
	user-select:none;
}
body{
	background-color:#0799de;
	width:100%;
	min-height:100vh;
	display:flex;
	justify-content:center;
	align-items:center;
	transform-style:preserve-3d;
	perspective:1000px;
}
.shadow{
	position:relative;
	width:100px;
	height:100px;
	transition:1s;
	top:0px;
}
.shadow:hover{
	top:-30px;
}
.shadow:before{
	content:'';
	position:absolute;
	bottom:-45px;
	left:50%;
	width:90%;
	height:40px;
	border-radius:50%;
	opacity:.8;
	background:rgba(0,0,0,.2);
	transform:translateX(-50%);
	filter:blur(8px);
}
.Social{
	position:absolute;
	width:100%;
	height:100%;
	cursor:pointer;
	transform-style:preserve-3d;
	animation:SocialMedia 8s linear infinite;
	transform:rotateX(0deg);
}
.Social div{
	position:absolute;
	width:100%;
	height:100%;
	box-shadow:inset 0px 0px 20px rgba(0,0,0,.5);
	text-align:center;
	line-height:100px;
	font-size:40px;
	color:#fff;
	transform-style:preserve-3d;
	perspective:1000px;
}
.Social div:first-of-type{
	background:#3b5999;
	transform:rotateY(360deg) translateZ(50px);
}
.Social div:nth-of-type(2){	
	background:#e4405f;
	transform:rotateY(270deg) translateZ(50px);
}
.Social div:nth-of-type(3){
	background:#25D366;	
	transform:rotateY(180deg) translateZ(50px);
}
.Social div:nth-of-type(4){
	background:#55acee;
	transform:rotateY(90deg) translateZ(50px);
}
.Social div:nth-of-type(5){	
	background:#0077B5;
	transform:rotateX(-90deg) translateZ(50px);
}
.Social div:last-of-type{	
	background:#cd201f;
	transform:rotateX(90deg) translateZ(50px);
}

@keyframes SocialMedia{
	0%{
		transform-origin:center;
		transform:perspective(1000px);
	}
	2%{
		transform-origin:center;
		transform:perspective(1000px) rotateY(0deg);
	}
	48%{
		transform-origin:center;
		transform:perspective(1000px) rotateY(360deg);
	}
	50%{
		transform-origin:center;
		transform:perspective(1000px) rotateX(0deg) rotateY(360deg);
	}
	98%{
		transform-origin:center;
		transform:perspective(1000px) rotateX(360deg) rotateY(360deg);
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.