CSS - Rotate a shape while maintaining its shape form-CodePudding

I'm pretty comfortable with this solution already but it still makes quite of a shapeshift as it rotates and I wanted to ask you guys if you think of a better solution.

What I want is, given is a hexagon, that starts with one axis up and then rotates to a line at the top,its not what I got but that's just a matter of arranging the rotation accordingly. Since this shape is rendered with multiple divs (found it online not my own) on top of each other that are not visible and covers the main shape so it displays as a hexagon, all the shapes have to rotate at the same time, one thing though is that hexagon-in0 has a different rotation degree than the other, I tried setting up another keyframe with an exact same animation just changing the rotation degree values but did not work, what do you think?

When I posted the code snippet here since I didn't add a background image like in my code I realize it looks like a cube rotating outside-in, kinda cool

.hexagon {
  position: relative;
  left: 50%;
  top: 0%;
  transform: translate(-50%, 0%);
      cursor: pointer;
    visibility: hidden;
    width: 400px; /*400*/
    height: 200px; /*200*/ }
.hexagon-in0 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(120deg);
       -moz-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
         -o-transform: rotate(120deg);
            transform: rotate(120deg); }
.hexagon-in1 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    animation: rotateHex 5s ease-in 1s forwards;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);}
.hexagon-in2 {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  background: rgb(70,243,252);
  background: radial-gradient(circle, rgba(70,243,252,1) 0%, rgba(67,28,130,1) 57%);
  visibility: visible;
  animation: rotateHex 5s ease-in 1s forwards;
  -webkit-transform: rotate(-60deg);
      -moz-transform: rotate(-60deg);
      -ms-transform: rotate(-60deg);
          -o-transform: rotate(-60deg);
            transform: rotate(-60deg);}
@keyframes rotateHex {
  0%{
    transform: rotate(-120deg);
  }
  100%{
    transform: rotate(-60deg);
  }

<div ><div ><div ><div ></div></div></div></div>

CodePudding user response：

Rotate the container instead of each individual piece.

.hexagon {
  position: relative;
  left: 50%;
  top: 0%;
  transform: translate(-50%, 0%);
  cursor: pointer;
  visibility: hidden;
  width: 400px; /*400*/
  height: 200px; /*200*/ 
  animation: rotateHex 5s ease-in 1s forwards;
}
.hexagon-in0 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(120deg);
       -moz-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
         -o-transform: rotate(120deg);
            transform: rotate(120deg);
}
.hexagon-in1 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
}
.hexagon-in2 {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  background: rgb(70,243,252);
  background: radial-gradient(circle, rgba(70,243,252,1) 0%, rgba(67,28,130,1) 57%);
  visibility: visible;
  -webkit-transform: rotate(-60deg);
      -moz-transform: rotate(-60deg);
      -ms-transform: rotate(-60deg);
          -o-transform: rotate(-60deg);
            transform: rotate(-60deg);}
@keyframes rotateHex {
  0%{
    transform: translate(-50%, 0%) rotate(-120deg);
  }
  100%{
    transform: translate(-50%, 0%) rotate(-60deg);
  }

<div ><div ><div ><div ></div></div></div></div>