Weird behavior when rotating an element on hover

Question

Given these two examples.

Using Hover

div {
  position: absolute;
  width: 150px;
  height: 40px;
  background: orange;
  left: 50%;
  top: var(--top);
  transition: transform 2s;
  transform: translateX(-50%);
  text-align: center;
  line-height: 40px;
  font-size: 1.2em;
}

div:hover {
  transform: translateX(-50%) rotate(var(--deg));
}

div:nth-child(1) {
  --deg: 180deg;
  --top: 20%;
}

div:nth-child(2) {
  --deg: -180deg;
  --top: 40%;
}

div:nth-child(3) {
  --deg: 360deg;
  --top: 60%;
}

<div>180deg</div>
<div>-180deg</div>
<div>360deg</div>

Using Animation

div {
  position: absolute;
  width: 150px;
  height: 40px;
  background: orange;
  left: 50%;
  top: var(--top);
  transform: translateX(-50%);
  text-align: center;
  line-height: 40px;
  font-size: 1.2em;
  animation: rotate 2s linear 2s;
}

@keyframes rotate {
  to {
    transform: translateX(-50%) rotate(var(--deg));
  }
}

div:nth-child(1) {
  --deg: 180deg;
  --top: 20%;
}

div:nth-child(2) {
  --deg: -180deg;
  --top: 40%;
}

div:nth-child(3) {
  --deg: 360deg;
  --top: 60%;
}

<div>180deg</div>
<div>-180deg</div>
<div>360deg</div>

As you can see rotate(180deg) and rotate(-180deg) act the same and rotate(360deg) doesn't move at all.

The problem is if you would have it move gradually it acts normally.

div {
  position: absolute;
  width: 150px;
  height: 40px;
  background: orange;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 40px;
  font-size: 1.2em;
}

div:hover {
  animation: rotate 2s linear;
}

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  25% {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(90deg);
  }
  75% {
    transform: translate(-50%, -50%) rotate(135deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(180deg);
  }
}

<div></div>

The solution that i found is to replace translate(-50%, -50%) with margins which is not consistent

div {
  position: absolute;
  width: 150px;
  height: 40px;
  background: orange;
  left: 50%;
  top: var(--top);
  transition: transform 2s;
  /* Minus half the width, hard coded not a good idea*/
  margin: 0 0 0 -75px; 
  text-align: center;
  line-height: 40px;
  font-size: 1.2em;
}

div:hover {
  transform: rotate(var(--deg));
}

div:nth-child(1) {
  --deg: 180deg;
  --top: 20%;
}

div:nth-child(2) {
  --deg: -180deg;
  --top: 40%;
}

div:nth-child(3) {
  --deg: 360deg;
  --top: 60%;
}

<div>180deg</div>
<div>-180deg</div>
<div>360deg</div>

So The main question is Why that weird behavior is taking place ?

EDIT : Not looking for just a quick answer (as you can see there's two available) but an explanation as well :)

The bug seems to be fixed – Temani Afif Jan 22 '21 at 11:15 — Temani Afif, Jan 22 '21 at 11:15

Ori Drori · Answer 1 · 2018-10-01T11:00:59.293

You need to set an initial rotate(0), so there can be animation between the two states. Set the div's initial transform to:

transform: translateX(-50%) rotate(0);

Transition:

div {
  position: absolute;
  width: 150px;
  height: 40px;
  background: orange;
  left: 50%;
  top: var(--top);
  transition: transform 2s;
  transform: translateX(-50%) rotate(0);
  text-align: center;
  line-height: 40px;
  font-size: 1.2em;
}

div:hover {
  transform: translateX(-50%) rotate(var(--deg));
}

div:nth-child(1) {
  --deg: 180deg;
  --top: 20%;
}

div:nth-child(2) {
  --deg: -180deg;
  --top: 40%;
}

div:nth-child(3) {
  --deg: 360deg;
  --top: 60%;
}

body {
  overflow: hidden;
}

<div>180deg</div>
<div>-180deg</div>
<div>360deg</div>

Animation:

div {
  position: absolute;
  width: 150px;
  height: 40px;
  background: orange;
  left: 50%;
  top: var(--top);
  transform: translateX(-50%) rotate(0);
  text-align: center;
  line-height: 40px;
  font-size: 1.2em;
  animation: rotate 2s linear 2s forwards;
}

@keyframes rotate {
  to {
    transform: translateX(-50%) rotate(var(--deg));
  }
}

div:nth-child(1) {
  --deg: 180deg;
  --top: 20%;
}

div:nth-child(2) {
  --deg: -180deg;
  --top: 40%;
}

div:nth-child(3) {
  --deg: 360deg;
  --top: 60%;
}

body {
  overflow: hidden;
}

<div>180deg</div>
<div>-180deg</div>
<div>360deg</div>

If i use margins to position the divs, `rotate(0)` is not needed, Why ? — Rainbow, Oct 01 '18 at 11:03
I can only guess that when transform is not initialised at all, the change is detected correctly. — Ori Drori, Oct 01 '18 at 11:04

Temani Afif · Accepted Answer · 2021-01-22T11:11:05.640

0

2021: The bug no more occur

It seems a browser bug (at least on Chrome) as it works fine if your try the code on Firefox.

Let refer to the the specification to explain this. Here is all the different cases of how interpolation between transform should work.

In our case, we will consider the last point where we don't have the same number of transform functions and the browser should handle this by adding the identity transform function from the missing list and in our case it should be rotate(0).

So technically a transition from translate(-50%) to translate(-50%) rotate(360deg) should be the same as a transition from translate(-50%) rotate(0) to translate(-50%) rotate(360deg).

Unless, I am missing something this is for sure a bug as in the case when rotate(360deg) is used alone, Chrome is handling this fine using the second point (when one value is none) which is almost the same as the last point.

edited Jan 22 '21 at 11:11

answered Oct 01 '18 at 22:42

Temani Afif

245,468
26
309
415

I see so, it's just chrome not following the spec, i suppose we mustn't relay on browser's to clean after us, Thank you :) – Rainbow Oct 02 '18 at 09:54
@ZohirSalakCeNa or you can report this as a bug to the chrome team ;) it may get fixed because it's a very particular case – Temani Afif Oct 02 '18 at 09:57
i will certainly look into that. – Rainbow Oct 02 '18 at 10:01

Weird behavior when rotating an element on hover

Using Hover

Using Animation

2 Answers2

Linked