Rotate Image css3 animation

What is Rotate Image css3 animation?

Rotate Image css3 animation is a simple way to add some animations to your images in your web pages. 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.

rotate-image-animation

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.

Rotate Image css3 animation

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

label, , , , , , , , , , ,

About the author