How To Rotate Social Icons in HTML/CSS

3 years ago

by Rajesh Chauhan

177 Views

How To Rotate Social Icons in HTML/CSS

Written by Rajesh Chauhan

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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

<!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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

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

Rajesh Chauhan

Hi, This is Rajesh Chauhan 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. Find best Web Hosting Black Friday Deals

Leave a Comment X