CSS rotation around a fixed point

Question

Is there a way to rotate elements around a fixed center point by using both the rotation and translate properties while maintaining the original (upright) orientation? In the following example, each element gets rotated around the fixed point but also skews each text element while doing so, while it should ideally remain horizontal throughout the animation.

body {
  display: grid;
  justify-content: center;
  width: 100vw;
}

.wrapper {
  width: 500px;
  height: 500px;
  display: grid;
  justify-content: center;
  align-content: center;
}

.wrapper>* {
  grid-column: 1;
  grid-row: 1;
}

.item1 {
  animation: rotate1 1s linear 1 forwards;
}

.item2 {
  animation: rotate2 1s linear 1 forwards;
}

.item3 {
  animation: rotate3 1s linear 1 forwards;
}

.item4 {
  animation: rotate4 1s linear 1 forwards;
}

@keyframes rotate1 {
  from {
    transform: rotate(0deg) translate(0px);
  }
  to {
    transform: rotate(45deg) translate(120px);
  }
}

@keyframes rotate2 {
  from {
    transform: rotate(0deg) translate(0px);
  }
  to {
    transform: rotate(135deg) translate(120px);
  }
}

@keyframes rotate3 {
  from {
    transform: rotate(0deg) translate(0px);
  }
  to {
    transform: rotate(225deg) translate(120px);
  }
}

@keyframes rotate4 {
  from {
    transform: rotate(0deg) translate(0px);
  }
  to {
    transform: rotate(315deg) translate(120px);
  }
}

<div class="wrapper">
  <h3 style="text-align: center">0</h3>
  <p class="item1">element1</p>
  <p class="item2">element2</p>
  <p class="item3">element3</p>
  <p class="item4">element4</p>
</div>

https://jsfiddle.net/hnr4ofmL

Answer 1

Here is the example based on what I understood from your problem. You need to rotate each item and also need to keep the text upright always.

So you will have to rotate the item and the content inside it as well.

Here I have added additional span and borders to explain the solution.

body {
  display: grid;
  justify-content: center;
  width: 100vw;
}

.wrapper {
  width: 500px;
  height: 250px;

  display: grid;
  justify-content: center;
  align-content: center;
}

.wrapper>* {
  grid-column: 1;
  grid-row: 1;
}

.items {
  padding: 4px;
}

.items span {
  display: block;
}

.item1 {
  animation: rotate1 1s linear 1 forwards;
}

.item2 {
  animation: rotate2 1s linear 1 forwards;
}

.item3 {
  animation: rotate3 1s linear 1 forwards;
}

.item4 {
  animation: rotate4 1s linear 1 forwards;
}

.item1 span {
  animation: spin1 1s linear 1 forwards;
}

.item2 span {
  animation: spin2 1s linear 1 forwards;
}

.item3 span {
  animation: spin3 1s linear 1 forwards;
}

.item4 span {
  animation: spin4 1s linear 1 forwards;
}

@keyframes spin1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-45deg);
  }
}

@keyframes spin2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-135deg);
  }
}

@keyframes spin3 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-225deg);
  }
}

@keyframes spin4 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-315deg);
  }
}

@keyframes rotate1 {
  from {
    transform: rotate(0deg) translate(120px);
  }

  to {
    transform: rotate(45deg) translate(120px);
  }
}

@keyframes rotate2 {
  from {
    transform: rotate(0deg) translate(120px);
  }

  to {
    transform: rotate(135deg) translate(120px);
  }
}

@keyframes rotate3 {
  from {
    transform: rotate(0deg) translate(120px);
  }

  to {
    transform: rotate(225deg) translate(120px);
  }
}

@keyframes rotate4 {
  from {
    transform: rotate(0deg) translate(120px);
  }

  to {
    transform: rotate(315deg) translate(120px);
  }
}

<div class="wrapper">
      <h3 style="text-align: center">0</h3>
      <p class="item1 items"><span>element1</span></p>
      <p class="item2 items"><span>element2</span></p>
      <p class="item3 items"><span>element3</span></p>
      <p class="item4 items"><span>element4</span></p>
 </div>

Borders to explain the solution:

body {
  display: grid;
  justify-content: center;
  width: 100vw;
}

.wrapper {
  width: 500px;
  height: 500px;

  display: grid;
  justify-content: center;
  align-content: center;
}

.wrapper>* {
  grid-column: 1;
  grid-row: 1;
}

.items {
  border: 1px solid black;
  padding: 4px;
}

.items span {
  border: 1px solid red;
  display: block;
}

.item1 {
  animation: rotate1 1s linear 1 forwards;
}

.item2 {
  animation: rotate2 1s linear 1 forwards;
}

.item3 {
  animation: rotate3 1s linear 1 forwards;
}

.item4 {
  animation: rotate4 1s linear 1 forwards;
}

.item1 span {
  animation: spin1 1s linear 1 forwards;
}

.item2 span {
  animation: spin2 1s linear 1 forwards;
}

.item3 span {
  animation: spin3 1s linear 1 forwards;
}

.item4 span {
  animation: spin4 1s linear 1 forwards;
}

@keyframes spin1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-45deg);
  }
}

@keyframes spin2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-135deg);
  }
}

@keyframes spin3 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-225deg);
  }
}

@keyframes spin4 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-315deg);
  }
}

@keyframes rotate1 {
  from {
    transform: rotate(0deg) translate(120px);
  }

  to {
    transform: rotate(45deg) translate(120px);
  }
}

@keyframes rotate2 {
  from {
    transform: rotate(0deg) translate(120px);
  }

  to {
    transform: rotate(135deg) translate(120px);
  }
}

@keyframes rotate3 {
  from {
    transform: rotate(0deg) translate(120px);
  }

  to {
    transform: rotate(225deg) translate(120px);
  }
}

@keyframes rotate4 {
  from {
    transform: rotate(0deg) translate(120px);
  }

  to {
    transform: rotate(315deg) translate(120px);
  }
}

<div class="wrapper">
      <h3 style="text-align: center">0</h3>
      <p class="item1 items"><span>element1</span></p>
      <p class="item2 items"><span>element2</span></p>
      <p class="item3 items"><span>element3</span></p>
      <p class="item4 items"><span>element4</span></p>
 </div>