css3, где используется точка отсчета rotate ()?

Возможный дубликат:
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() при наведении, и это все еще не имеет для меня смысла.

Четкая и тщательная помощь будет принята с благодарностью.


css rotation translate-animation
person Sasha    schedule 25.12.2011    source источник
comment
Используйте transform-origin, Люк.   -  person c-smile    schedule 25.12.2011
comment
Я уже ответил вам здесь: stackoverflow.com/questions /8627939/   -  person joshnh    schedule 25.12.2011

Ответы (1)


arrow_upward
2
arrow_downward

rotate(angle) не добавляет угол к повороту, а поворачивает элемент на угол. Итак, в «:hover» css вы должны поставить лайк

rotate(156.5deg);

Вместо перевода вы можете использовать свойство transform-origin в css.

надеюсь, это то, чего вы хотите достичь: http://jsfiddle.net/diode/QGE7F/9/< /а>

person Diode    schedule 25.12.2011
comment
большое спасибо! эта строка, которую вы написали .... rotate (угол) не добавляет угол к вращению, но поворачивает элемент на угол, что полностью изменило понимание, ха-ха. Благодарность! я сначала подумал, что это первый способ, ха-ха - person Sasha; 26.12.2011