How to Rotate One or Two Image using CSS & HTML

I have two simple code for make rotating image using HTML and CSS. You can use this code on your project and replace our image’s URL with your image URL.

code for single image rotating

<style>
@keyframes rotate {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}

.globe {margin: auto;
width: 100px;
height: 100px;
border-radius: 50%;
background-image: url('https://www.thekroyaard.com/wp-content/uploads/2024/04/thekroyaardAnimationLogo.jpg');
background-size: cover;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
animation: rotate 10s linear infinite;
background-size: 100px 100px;
background-repeat: no-repeat;
}
</style>

<div class="globe"></div>

code for double image

<style>

@keyframes rotate {
0% {transform: rotateY(0deg);
background-image: url('https://www.thekroyaard.com/wp-content/uploads/2024/05/hand.jpg');
}
50% {
background-image: url('https://www.thekroyaard.com/wp-content/uploads/2024/04/thekroyaardAnimationLogo.jpg');
}
100% { transform: rotateY(360deg);
background-image: url('https://www.thekroyaard.com/wp-content/uploads/2024/05/hand.jpg');
}
}

.globe {margin: auto;
width: 100px;
height: 100px;
border-radius: 50%;
background-size: cover;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
animation: rotate 10s linear infinite;
background-size: 100px 100px;
background-repeat: no-repeat;
}
</style>

<div class="globe"></div>

Use both or one code in your project and give credit to me. and hope this code is helpful for you. Thanks for visiting.

You May Also Like