Rotate a background image on hover of parent element?

HTML & CSS
1

Can someone tell me if its possible, via css3 or jQuery, to rotate a background image (without rotating the container that the background is attached to) on hover of the container?

2

You can do it for Firefox only if you add the image using :after.

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
div {
	width:300px;
	height:300px;
	border:1px solid #000;
	margin:90px;
	position:relative;
}
div:after{
	content:" ";
	top:10px;
	left:10px;
	right:10px;
	bottom:10px;
	position:absolute;
	background:red;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}
div:hover:after {
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	transform: rotate(360deg);
}
</style>
</head>

<body>
<div> </div>
</body>
</html>

Firefox seems to be the only one that can handle that though.

3

Thanks for that Paul. GC to the rescue every time :slight_smile: