One ball image rotate animation css

Hello friends, today we will see you in this blog you'll learn HTML code for ball image rotate animation css codes for website| HTML Website Tutorials indicoderz .Earlier I have shared a blog on how to create a HTML code for one ball image rotate animation css codes for website| HTML Website Tutorials indicoderz Generally.

Ball rotate image 360 degrees in css process of making

First step create HTML file
Second step create CSS file
Third step upload image file

Ball Image rotate animation

Ball rotate image 360 degrees

How to rotate image 360 degrees in css Code

HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=Edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Ball animation</title>

  <link rel="stylesheet" href="style.css">

</head>

<body>

<div class="ballrot">

	<img src="ball.png" alt="img" >

</div>

</body>

</html>

CSS Code

.ballrot img{

	animation-name: rotate;

	animation-duration: 10s;

	animation-delay: 0s;

	border-radius: 50%;

}

@keyframes rotate {

	0% {transform: rotate(0deg);}

	25% {transform: rotate(90deg);}

	50% {transform: rotate(180deg);}

	100% {transform: rotate(360deg);}

}

Output

Output of Ball rotate image 360 degrees css

One ball image rotate animation css

Ball rotate image 360 degrees in css process of making

Ball Image rotate animation

How to rotate image 360 degrees in css Code

HTML Code

CSS Code

Output

1 Comments

Post a Comment

Contact Form

one ball image rotate animation css

One ball image rotate animation css

Ball rotate image 360 degrees in css process of making

Ball Image rotate animation

How to rotate image 360 degrees in css Code

HTML Code

CSS Code

Output

You might like

1 Comments

Post a Comment

Contact Form