css - css3引用的rotate()点在哪里使用？

Possible Duplicate:
translate vs transform-origin css3

我一直在试图弄清楚此旋转功能如何工作。

我有一个div，我将其称为rotate()和translate()。然后，当我将鼠标悬停在图像上时，再执行一次rotate()。在第二次旋转中，我似乎找不到参考点或它所围绕的内容。

该代码非常简单，但确实让我感到困扰。

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>

基本上，灰色块被旋转并具有平移。当您将鼠标悬停在它上面时，我将调用另一个rotate（）。但是它如何直线旋转呢？这很疯狂！我在悬停中更改了rotate()的值，但对我来说仍然没有意义。

明确和彻底的帮助将不胜感激。

最佳答案

rotation（angle）不会将角度附加到旋转，而是将元素旋转到角度。因此，在“：hover” css中，您必须给像

rotate(156.5deg);

除了翻译外，您还可以在CSS中使用transform-origin属性。

希望这是您想要实现的目标：http://jsfiddle.net/diode/QGE7F/9/

关于css - css3引用的rotate()点在哪里使用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8628227/

Rotate

css - css3引用的rotate()点在哪里使用？