How To Rotate Social Icons in HTML/CSS

By Deepak Raj On Dec 15, 2018

in this article, we are going to learn How To Rotate Social Icons in HTML/CSS. CSS3 animations property allows animation of HTML elements without using JavaScript. For using CSS3 animation, we need to use keyframes to define the animation rules. in this article, we will use CSS transform property and the rotate() function to create rotate social media icons.

Creating index Page – HTML Structure

in this step we are going to add social media icons in index page using Table tag and Div tag. here the source code you can save it as index.html.

<!DOCTYPE html>
<html>
	<head>
		<title>How To Rotate Social Icons in HTML/CSS</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	
<body>

	<table class="table_style" cellspacing="4" cellpadding="4">

		<tr>
				<td>
					<div class="rotate-image"><img src="image_animation/fb.png" /></div>
				</td>
				<td>
					<div class="rotate-image"><img src="image_animation/twit.png" /></div>
				</td>
				<td>
					<div class="rotate-image"><img src="image_animation/g+.png" /></div>
				</td>
				<td>
					<div class="rotate-image"><img src="image_animation/yt.png" /></div>
				</td>
		</tr>
		<tr>
				<td>
					<span>Facebook</span>
				</td>
				<td>
					<span>Twitter</span>
				</td>
				<td>
					<span>Google Plus</span>
				</td>
				<td>
					<span>Youtube</span>
				</td>
		</tr>
	</table>

</body>
</html>

Creating CSS

in this step we are going create style for index page to rotate social media icons. here the source code you can save it as style.css.

body {
	width:450px;
	margin:auto;
	margin-top:150px;
	text-align:center;
}
.rotate-image {
	height: 48px;
	width: 48px;
	margin: 10px;
	text-align:center;
	border-radius: 50%;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
	cursor:pointer;
}

.rotate-image:hover {
	box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
	-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	-ms-transform:rotate(360deg);
	transform:rotate(360deg);
}

.table_style {
	border:3px solid #CCC;
	-webkit-box-shadow: -3px 6px 13px 3px rgba(201,201,201,1);
	-moz-box-shadow: -3px 6px 13px 3px rgba(201,201,201,1);
	box-shadow: -3px 6px 13px 3px rgba(201,201,201,1);
}

span {
	color:black;
}


td {
	text-align:center;
	font-weight:bold;
}

Download Source Code