eloism eloism - 2 months ago 6
CSS Question

Spin a div but make its content not go upside down

Is there a way to make a div spin, aswell as its content, but make the content not go upside-down while rotating ?

What I mean is that the div-childs would follow the rotation of the mother-div spinning, but while remaining in the same direction (top on top, bottom on bottom).

My english isn't goog enough to articulate properly what I want to do, so here is an exemple :



.spin {
margin: 50px;
width: 200px;
height: 200px;
background: orange;
animation: spin 10s infinite linear;
}

#div1 {
border: 1px solid blue;
width: 50px;
height: 50px;
}

#div2 {
border: 1px solid red;
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
}

#div3 {
border: 1px solid black;
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
}

#div4 {
border: 1px solid green;
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
right: 0;
}

.spin:hover {
animation-play-state: paused;
}

@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}

<div class="spin">
<div id="div1">hello
</div>
<div id="div2">hello
</div>
<div id="div3">hello
</div>
<div id="div4">hello
</div>
</div>





In the exemple above, the child divs are following the rotation and the spin.

I would like them not to "spin upside-down" and just follow the rotation.

I've seen these type of animation in several websites but I can't recall where exactly.

Is there a way to do this in css/js/jquery/php... ?

Answer

You can apply the same animation to the four children, but in reverse. That way, the rotation of the children counteract the rotation of the parent and the children remain upright.

For clarity, I've used animation-direction to reverse the animation:

animation-direction: reverse;

But you could include the direction in your animation shorthand, like:

animation: spin 10s reverse infinite linear;

Here's an example:

.spin {
  margin: 50px;
  width: 200px;
  height: 200px;
  background: orange;
  animation: spin 10s infinite linear;
}
.spin div {
  width: 50px;
  height: 50px;
  animation: spin 10s infinite linear;
  animation-direction: reverse;
}
#div1 {
  border: 1px solid blue;
}
#div2 {
  border: 1px solid red;
  position: absolute;
  top: 0;
  right: 0;
}
#div3 {
  border: 1px solid black;
  position: absolute;
  bottom: 0;
  left: 0;
}
#div4 {
  border: 1px solid green;
  position: absolute;
  bottom: 0;
  right: 0;
}
.spin:hover,
.spin:hover div {
  animation-play-state: paused;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
<div class="spin">
  <div id="div1">hello</div>
  <div id="div2">hello</div>
  <div id="div3">hello</div>
  <div id="div4">hello</div>
</div>

Comments