Rotate Image css3 animation

Rotate Image css3 animation

What is Rotate Image css3 animation?

CSS3 animations will add awesomeness to any websites. Different kinds of effects with the use of CSS3, will make our website more beautiful and interesting. So, CSS3 animations are very useful for our websites.

Here is another example for CSS 3 animations and css3 transitions. I am going to give an example of CSS 3 animations using an arrow and a circle, Rotate Image css3 animation or Object rotating clockwise with CSS3 Animations.

How Rotate Image css3 animation works?

In this example I use @keyframe – it involves the description of specific moments of the animation with the @keyframe rule. This allows you to have repeating animations that don’t depend on user actions or JavaScript to get triggered.

HTML for Rotate Image css3 animation

    <div class="container-round">
        <div class="round"></div>
       <div class="arrow"></div>
    </div>

Here is a container which holds the circle and the arrow which will be rotating.

CSS for Rotate Image css3 animation

   .container-round {
	width: 400px;
	height: 400px;
	margin: 0 auto;
	position:relative;
	overflow:hidden;
}

.round {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(round.png) no-repeat center center;
}

.arrow{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: url(arrow.png) no-repeat 50px center;
	-webkit-animation:orbit 2s linear infinite;
	animation:orbit 2s linear infinite;
	transition:background-position 0.8s;
}

/* Here I am defining the keyframes of the animation */

@-webkit-keyframes orbit {
	from {
		-webkit-transform:rotate(0deg);}
	to {
		-webkit-transform:rotate(360deg);
	}
}

@keyframes orbit {
	from {
		transform:rotate(0deg);
		-webkit-transform:rotate(0deg);}
	to {
		transform:rotate(360deg);
		-webkit-transform:rotate(360deg);
	}
}

Here, defining the name of the animation as ‘orbit’ and adding keyframes for the orbit animation.

Demo for Rotate Image css3 animation

Rotate Image Animation with CSS3 Demo

The same way, can animate objects in different directions.

Here we have seen image or an object rotating infinity. So now let us try to make an image rotate on a particular event. For eg. when we hover the image, let the image rotate.

HTML for Rotate Image on Hover

We will add any image to do this animation. In our example we are using an image with same height and width. Add the class “rotateImg” to the image tag.

Rotate Image on Hover CSS

.rotateImg{	
	border-radius:50%;    	
        -webkit-transition: -webkit-transform .8s ease-in-out;	
        -ms-transition: -ms-transform .8s ease-in-out;		
        transition: transform .8s ease-in-out;	
}
.rotateImg:hover{
        transform:rotate(360deg);
        -ms-transform:rotate(360deg);	
        -webkit-transform:rotate(360deg);
}

The CSS3 property transition is used here. The transition property is a shorthand property for the four transition properties: transition-property, transition-duration, transition-timing-function, and transition-delay.

Always specify the transition-duration property, otherwise the duration is 0 or the default value is 0, and the transition will have no effect.

The transform property defines a 2D rotation, the angle is specified in the parameter. When we hover the image, the image rotates (2D) 360 degrees.

Demo for Rotate Image Animation on Hover

Rotate Image css3 animation Demo

2 thoughts on “Rotate Image css3 animation

  1. Hеllo there, I thіnk үour web site may be Һavіng web
    browser compatibility problems. When I take a look at your site in Safari, it looκs fine howеver, when opening in
    IE, it’s got sօme overlapping issues.ӏ merelү wanted to give you a quick heads up!
    Aside from that, wonderful site!

Leave a Reply

Your email address will not be published. Required fields are marked *