Views :- 507

How to Create a CSS3 Rotating Menu

Today we are going to be cover pretty cool rotating menu icons using css3. You can add this effect of spinning image on mouse over an icon, and it spins (rotates) on its axis which catch user attention.CSS3's transform: rotate(xdeg) property helps to achieve this effect. Using it you can rotate an element any number of degrees, clockwise or counter clock wise, and whether to do so one or both ways of a state change.

positive degree rotate(xdeg) rotates the element clockwise, while negative (ie: -360deg) rotates it anti clockwise. To animate this property so the element actually spins into position.As usual there are some limitation of browsers, only modern and latest version browsers are supporting this effect. (IE10+, FF3.5+, Chrome/Safari, and Opera 10+)

Step #1:-Define Menu Container

<div class="container">
	<ul>
		<li><a href="http://www.twitter.com"><span><img src="http://www.technicalkeeda.com/img/images/demo/twitter.png"></span></a></li>
		<li><a href="http://www.facebook.com"><span><img src="http://www.technicalkeeda.com/img/images/demo/facebook.png"></span></a></li>
		<li><a href="http://www.youtube.com"><span><img src="http://www.technicalkeeda.com/img/images/demo/youtube.png"></span></a></li>
	</ul>
</div>

Step #2:-Define Css

<style>
.container {
	margin-top:5px;
	margin-left:5px;
}
.container h1{
	margin:5px;
	padding:5px;
}
ul {
	width:32px; 
	list-style: none;			 			 
}

li a span {
	display: block; width: 30px; height: 32px; 
	position: relative; z-index: 10;
	margin:auto;
	-webkit-transition: -webkit-transform 0.4s ease-out;
	-moz-transition: -moz-transform 0.4s ease-out;
	transition: transform 0.4s ease-out;
}

.container ul li a:hover span {
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	transform: rotate(360deg);
}
</style>

Step #3:-Finish Enjoy the Live demo :)

css

How to Create a CSS3 Rotating Menu

Popular Posts

You also Like this Tutorials

Other Posts