CSS3 HTML5

How To Rotate Social Icons in HTML/CSS

How To Rotate Social Icons in HTML/CSS
Written by Deepak Raj

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;
}

About the author

Deepak Raj

Hi, This is Deepak Raj from Sourcecodessite.com.I am a Web Developer, Blogger, Online Instructor and SEO consultant who has been working online for last 4 years and he is running several successful websites on the internet.

Leave a Comment