Hi all, Today we will see how to do the object rotate animation using css3. The infinity time the object or image will rotate in the background using css3 animation. The object or image will rotate 360deg using css key frame, The animation is running completely background so it will not merge with the content, because the object position is absolute;
This is one of the simple animation it will give nice effect for your website, You just follow the provided code below and you can change the objects or image according to your design. I provided full code and the demo link below you can check it. I hope this simple animation will helpful to you.
Code for Object rotate animation using css3
<html>
<head>
<title>Rotate object animation using css3</title>
<style>
.floating-ball-model-3 > span {
animation-name: floating-ball-model-3;
animation-duration: 7s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-name: floating-ball-model-3;
-webkit-animation-duration: 7s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: floating-ball-model-3;
-moz-animation-duration: 7s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: floating-ball-model-3;
-ms-animation-duration: 7s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-animation-name: floating-ball-model-3;
-o-animation-duration: 7s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
}
@keyframes floating-ball-model-3 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes floating-ball-model-3 {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes floating-ball-model-3 {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-o-keyframes floating-ball-model-3 {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
.floating-ball-model-3 span.floating-ball-1 {
position: absolute;
left: 10%;
top: 50%;
width: 80px;
z-index: 1;
height: 70px;
background: url(7.png) center center no-repeat;
}
.floating-ball-model-3 span.floating-ball-2 {
position: absolute;
right: 15%;
top: 16%;
z-index: 1;
width: 80px;
height: 80px;
background: url(8.png) center center no-repeat;
}
.floating-ball-model-3 span.floating-ball-3 {
position: absolute;
right: 10%;
top: 70%;
z-index: 1;
width: 71px;
height: 70px;
background: url(9.png) center center no-repeat;
}
</style>
</head>
<body>
<div class="sandiv">
<div class="floating-ball-model-3">
<span class="floating-ball-1"></span>
<span class="floating-ball-2"></span>
<span class="floating-ball-3"></span>
</div>
<h1 style="text-align:center;">SANWEBCORNER.COM</h1>
<p style="text-align:center;">Rotate object infinity time using css3</p>
</div>
</body>
</html>
0 Comments