0

可能重复：
translate vs transform-origin css3

我一直试图弄清楚这个旋转功能是如何工作的。

我有一个 div，我称之为 arotate()和translate()on。然后，当我将鼠标悬停在图像上时，我再执行一个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()悬停中的值，但对我来说仍然没有意义。

将不胜感激清晰而彻底的帮助。

4

1 回答 1

2

rotate(angle)不会将角度附加到旋转，而是将元素旋转到角度。所以在 ":hover" css 中，你必须像

rotate(156.5deg);

您可以在 css中使用transform-origin属性，而不是进行翻译。

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

于 2011-12-25T04:55:31.450 回答