CSS Rotate

HTML & CSS
1

Hi all,

Can anyone help me on this issue?

What I am trying to achieve is, rotate a div with an image inside (but not rotate the image - have the image stay positioned horizontally).

Here is a link to a test page - LINK

What I have at the moment is the div rotating and the image rotating with it (but I’m not liking that too much - as stated above, I would prefer to have the image stay positioned horzontally).

I know the choice of image isn’t the best since it’s round, but it was the first image I came across…

Cheers,
Al.

2

What you want to achieve can’t be done without the image jumping as you would need to set a positive 15deg rotation in order to counteract the -15deg rotation on the DIV, what you would need to do is have the background and the image as separate children either inside your DIV or your anchor tag and animate only the child that’s not the image.

3

Thanks for the reply Chris, I was playing around with it and came up with this - LINK - having the icon and background color separate from the div that is rotating… It’s working ok, I don’t think I’m overly happy with the coding though…

Thanks again.

4

Hi,

You can do it with your original code by setting a counter rotation on the image at the same time which has the effect that it doesn;t appear to move.

e.g.


<!DOCTYPE html>
<html lang="en">
<head>
<title>Box Rotate</title>
<meta charset=utf-8>
<style>
body {
	margin: 0;
	padding: 0;
}
#wrapper {
	width: 100%;
	float: left;
}
#content {
	width: 1000px;
	margin: 0 auto;
}
#boxRow {
	float: left;
	width: 100%;
	margin: 50px 0 0 0;
}
.box, .boxLast {
	float: left;
	margin-right: 25px;
}
.boxLast { margin: 0; }
/* or */
.box:last-child { margin:0 }
.box a {
	display: block;
	width: 176px;
	height: 176px;
	line-height:176px;
	border:1px solid #fff;
	text-align:center;
	background-color: #298ae9;
	-webkit-transition: all 0.6s ease 0s;
	transition: all 0.5s ease 0s;
	position:relative;
}
.box img {
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	margin:auto;
	-webkit-transition: all 0.6s ease 0s;
	transition: all 0.5s ease 0s;
}
.box:hover a {
	-webkit-transform: rotate(-15deg);
	-moz-transform: rotate(-15deg);
	-o-transform: rotate(-15deg);
	-ms-transform: rotate(-15deg);
	transform: rotate(-15deg);
	-webkit-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
	background-color: #0e9c49;
}
.box:hover img {
	-webkit-transform: rotate(15deg);
	-moz-transform: rotate(15deg);
	-o-transform: rotate(15deg);
	-ms-transform: rotate(15deg);
	transform: rotate(15deg);
	-webkit-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
}
img { border: 0; }
</style>
</head>
<body>
<div id="wrapper">
		<div id="content">
				<div id="boxRow">
						<div class="box"> <a href="#"><img src="http://clickstream.ie/webmakers/image-01.png" alt="Image One" /></a> </div>
						<div class="box"> <a href="#"><img src="http://clickstream.ie/webmakers/image-01.png" alt="Image One" /></a> </div>
						<div class="box"> <a href="#"><img src="http://clickstream.ie/webmakers/image-01.png" alt="Image One" /></a> </div>
						<div class="box"> <a href="#"><img src="http://clickstream.ie/webmakers/image-01.png" alt="Image One" /></a> </div>
						<div class="box boxLast"> <a href="#"><img src="http://clickstream.ie/webmakers/image-01.png" alt="Image One" /></a> </div>
				</div>
		</div>
</div>
</body>
</html>

So while you turn the parent clockwise you then turn the child anti-clockwise at the same time.