How to keep the inner square in a infinite rotation

Question

I have these two divs as an example and I want to keep the inner one in a infinite rotation state. How do I go about that?

<div class="parent">
  <div class="child">
 </div>
</div>

.parent{
  width:100px;
  height:100px;
  margin:50px auto;
}

.child{
  width:50px;
  height:50px;
  margin:25px auto;
  transform:rotate(45deg)
}

3 upvotes in 2 min for an unclear question. seems suspicious ... what does *in a constant rotation* mean? — Temani Afif, Jul 06 '19 at 20:39
It seems pretty straightforward to me. Grzegorz's answer nails it. — symlink, Jul 06 '19 at 20:49

score 2 · Accepted Answer · answered Jul 06 '19 at 20:43

2

Maybe it was about infinite rotation. If so, maybe that's what it was about :)

.parent {
      width: 100px;
      height: 100px;
      margin: 50px auto;
      border: 1px solid red;
    }

    .child {
      width: 50px;
      height: 50px;
      margin: 25px auto;
      animation: rotating 2s linear infinite;
      border: 1px solid blue;
    }

    @keyframes rotating {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

<div class="parent">
    <div class="child">
    </div>
  </div>

answered Jul 06 '19 at 20:43

Grzegorz T.

3,903
2
11
24

1

This is exactly what I need! Thank you! – Jul 06 '19 at 20:44
1

You're welcome. And those who are negative, not everyone speaks English every day because it is not their native language. A bit of empathy. – Grzegorz T. Jul 06 '19 at 20:53

How to keep the inner square in a infinite rotation

1 Answers1