Question

可能重复：
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()的值，但对我来说仍然没有意义。

非常感谢明确而全面的帮助。

Answer 1

旋转（角度）不会向旋转附加角度，但会将元素旋转为角度。所以在“：hover”css中，你必须像

一样

rotate(156.5deg);

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

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

css3旋转（）使用的参考点在哪里？

1 个答案: