Possible Duplicate:
translate vs transform-origin css3
I’ve been stuck trying to figure out how this rotate function works.
I have a div that I call a rotate() and translate() on. Then when I hover over the image, I perform one more rotate(). On the 2nd rotate, I can’t seem to find the point of reference or what it revolves around.
The code is very simple but its really stumping me.
div {
height: 361px;
width: 361px;
background: rgba(119, 0, 36, 0.5);
opacity: 1;
-webkit-transition: all .3s ease-in-out 0.6s;
-moz-transition: all 0.3s ease-in-out 0.6s;
}
div#div2 {
background-color: rgba(0, 0, 0, 0.5);
-webkit-transform: rotate(56.5deg) translateX(-180px);
-moz-transform: rotate(56.5deg) translateX(-180px);
}
div#div2:hover {
-webkit-transform: rotate(56.5deg);
-moz-transform: rotate(56.5deg);
}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>Basically the grey block is rotated and has a translation on it. when you hover over it, I call another rotate(). but how is it rotating in a straight line?! it’s crazy! I changed the values around for the rotate() in the hover and it still makes no sense to me.
Clear and thorough help would be greatly appreciated.
rotate(angle) does not append angle to rotation, but rotates the element to angle. So in “:hover” css, you have to give like
Instead of translating, you can use transform-origin property in css.
hope this is what you want to achieve : http://jsfiddle.net/diode/QGE7F/9/