Rotate background image constantly

HTML & CSS
1

I did this in the past, but I don’t know how I did it. So it is possible. Somehow, without JavaScript. I managed to have a DIV, and image set as background-image and then I had that image rotate itself infinitely. I used keyframes. But that’s all I can remember, I did it with use of a tutorial that I can’t find again (it was like two years ago).

Does anybody have a link or a snippet under their hand?

2

That would be CSS Animation.

3

You can’t animate it straightforward with keyframes. I did some nitpicky way and it worked actually well.

But that’s nothing what you can find in website that just cite specifications.

I hoped someone has already done it as well and could reshare that extra.

4

You can do it like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>

div{
	width:300px;
	height:300px;
	background:url(images/seascape.jpg) no-repeat 0 0;
	background-size:cover;
	border:1px solid #000;
	animation:spin 1s linear infinite;
}

@keyframes spin{
	from{transform:rotate(0deg)}
	to{transform:rotate(360deg)}	
}

</style>
</head>

<body>
<div>Stuff</div>
</body>
5

Hi there znazjdov,

unfortunately, it appears that “Rotate background
image constantly” is a rather ambiguous request. :wonky:

@PaulOB interprets it one way and I another…

[code]

untitled document body { background-color: #f0f0f0; font: 1em/1.62em arial, helvetica, sans-serif; } #box { position: relative; width: 60vw; height: 35.4vw; border: 0.1em solid #000; margin: auto; background-image: url(face-4.jpg),url(face-6.jpg),url(face-4.jpg); background-size: 100% auto; background-repeat: no-repeat; box-shadow: 0.4vw 0.4vw 0.4vw #999; animation: rotatebg 8s ease-in-out infinite; } #box span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 2em; color: #f93; text-shadow: 0 0 0.1em #000, 0 0 0.2em #000, 0 0 0.3em #000, 0 0 0.4em #000; white-space: nowrap; } @keyframes rotatebg { 0% {background-position: 0 0, 0 0, 0 0;} 37.5% {background-position: 0 0, 0 0, 0 0;} 50% {background-position: -60vw 0, 0 0, 0 0;} 87.5% {background-position: -60vw 0, 0 0, 0 0;} 100% {background-position: -60vw 0, -60vw 0, 0 0;} }
Lorem Ipsum
[/code]

All I can say in defense of my interpretation, is that the text in
@PaulOB 's example seems to be slightly more difficult to read. :lol:

coothead

2 Likes
6

Yes, I think I got the wrong end of the stick with my simplistic attempt :slight_smile:

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.