'Is there a way for me to rotate these snowflakes in a normal way?

so I had a fun idea to make some snowflakes on the screen and I'm having a problem with rotating the whole snowflake slowly, and I'm not sure what method I should use to solve this problem. As you can see it's really messy (sorry, still a beginner :) ),but what I want is for the snowflakes to slowly rotate back to 360deg, I've put in the HTML part different rotations to make it a snowflake, but in css when I try to rotate it using an animation it doesn't work properly, it just rotates slowly to the spot I placed it (300px,300px). So,I'm out of ideas on how to make this work. Any help is appreciated :)

body {
  background-color: rgb(40, 41, 77);
}

ul {
  display: block;
  list-style: none;
  position: absolute;
  left: -1%;
  top: -20px;
}

li {
  width: 100;
  height: 67;
  background-color: rgb(102, 143, 231);
  float: left;
  margin: 20px;
  animation-name: prva;
  animation-duration: 10s;
  border-radius: 90%;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform: rotate(90deg);
  animation-direction: alternate;
}

@keyframes prva {
  0% {
    background-color: red;
  }
  10% {
    background-color: green;
  }
  20% {
    background-color: rgb(255, 210, 8);
  }
  30% {
    background-color: rgb(0, 38, 255);
  }
  40% {
    background-color: rgb(233, 10, 233);
  }
  50% {
    background-color: green;
  }
  60% {
    background-color: red;
  }
  70% {
    background-color: rgb(255, 210, 8);
  }
  80% {
    background-color: rgb(0, 38, 255);
  }
  90% {
    background-color: rgb(233, 10, 233);
  }
}

p {
  transform: rotate(-90deg);
  text-align: center;
  position: relative;
  top: 10%;
  color: white;
}

#div1 {
  width: 1780px;
  height: 0px;
  border: solid 5px;
  border-color: rgb(97, 63, 12);
  position: absolute;
  top: 0.05%;
  left: 2%;
}

#pahuljice {
  width: 70px;
  height: 10px;
  background-color: whitesmoke;
  position: absolute;
  animation-name: pahulje;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  display: block;
}

@keyframes pahulje {
  0% {
    top: 0%;
  }
  10% {
    top: 6%;
  }
  20% {
    top: 12%;
  }
  30% {
    top: 18%;
  }
  40% {
    top: 24%;
  }
  50% {
    top: 30%;
  }
  60% {
    top: 36%;
  }
  70% {
    top: 42%;
  }
  80% {
    top: 48%;
  }
  90% {
    top: 54%;
  }
  100% {
    top: 60%;
  }
}

<html>

<head>
  <link rel="stylesheet" href="zadatak6css.css">
</head>

<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div id="div1"> </div>

  <div id="pahuljice" style="transform: translate(300px,300px);"></div>
  <div id="pahuljice" style="transform: translate(300px,300px) rotate(90deg);"></div>
  <div id="pahuljice" style="transform: translate(300px,300px) rotate(45deg);"></div>
  <div id="pahuljice" style="transform: translate(300px,300px) rotate(-45deg);"></div>

  <div id="pahuljice" style="transform: translate(500px,400px);"></div>
  <div id="pahuljice" style="transform: translate(500px,400px) rotate(90deg);"></div>
  <div id="pahuljice" style="transform: translate(500px,400px) rotate(45deg);"></div>
  <div id="pahuljice" style="transform: translate(500px,400px) rotate(-45deg);"></div>

  <div id="pahuljice" style="transform: translate(600px,200px);"></div>
  <div id="pahuljice" style="transform: translate(600px,200px) rotate(90deg);"></div>
  <div id="pahuljice" style="transform: translate(600px,200px) rotate(45deg);"></div>
  <div id="pahuljice" style="transform: translate(600px,200px) rotate(-45deg);"></div>

  <div id="pahuljice" style="transform: translate(1000px,200px);"></div>
  <div id="pahuljice" style="transform: translate(1000px,200px) rotate(90deg);"></div>
  <div id="pahuljice" style="transform: translate(1000px,200px) rotate(45deg);"></div>
  <div id="pahuljice" style="transform: translate(1000px,200px) rotate(-45deg);"></div>

  <div id="pahuljice" style="transform: translate(250px,600px);"></div>
  <div id="pahuljice" style="transform: translate(250px,600px) rotate(90deg);"></div>
  <div id="pahuljice" style="transform: translate(250px,600px) rotate(45deg);"></div>
  <div id="pahuljice" style="transform: translate(250px,600px) rotate(-45deg);"></div>

  <div id="pahuljice" style="transform: translate(200px,100px);"></div>
  <div id="pahuljice" style="transform: translate(200px,100px) rotate(90deg);"></div>
  <div id="pahuljice" style="transform: translate(200px,100px) rotate(45deg);"></div>
  <div id="pahuljice" style="transform: translate(200px,100px) rotate(-45deg);"></div>

  <div id="pahuljice" style="transform: translate(1200px,400px);"></div>
  <div id="pahuljice" style="transform: translate(1200px,400px) rotate(90deg);"></div>
  <div id="pahuljice" style="transform: translate(1200px,400px) rotate(45deg);"></div>
  <div id="pahuljice" style="transform: translate(1200px,400px) rotate(-45deg);"></div>

  <div id="pahuljice" style="transform: translate(1800px,200px);"></div>
  <div id="pahuljice" style="transform: translate(1800px,200px) rotate(90deg);"></div>
  <div id="pahuljice" style="transform: translate(1800px,200px) rotate(45deg);"></div>
  <div id="pahuljice" style="transform: translate(1800px,200px) rotate(-45deg);"></div>

  <div id="pahuljice" style="transform: translate(1400px,600px);"></div>
  <div id="pahuljice" style="transform: translate(1400px,600px) rotate(90deg);"></div>
  <div id="pahuljice" style="transform: translate(1400px,600px) rotate(45deg);"></div>
  <div id="pahuljice" style="transform: translate(1400px,600px) rotate(-45deg);"></div>

  <div id="pahuljice" style="transform: translate(800px,600px);"></div>
  <div id="pahuljice" style="transform: translate(800px,600px) rotate(90deg);"></div>
  <div id="pahuljice" style="transform: translate(800px,600px) rotate(45deg);"></div>
  <div id="pahuljice" style="transform: translate(800px,600px) rotate(-45deg);"></div>


  <div id="pahuljice" style="transform: translate(850px,300px);"></div>
  <div id="pahuljice" style="transform: translate(850px,300px) rotate(90deg);"></div>
  <div id="pahuljice" style="transform: translate(850px,300px) rotate(45deg);"></div>
  <div id="pahuljice" style="transform: translate(850px,300px) rotate(-45deg);"></div>

  <div id="pahuljice" style="transform: translate(1350px,300px);"></div>
  <div id="pahuljice" style="transform: translate(1350px,300px) rotate(90deg);"></div>
  <div id="pahuljice" style="transform: translate(1350px,300px) rotate(45deg);"></div>
  <div id="pahuljice" style="transform: translate(1350px,300px) rotate(-45deg);"></div>

  <div id="pahuljice" style="transform: translate(1600px,500px);"></div>
  <div id="pahuljice" style="transform: translate(1600px,500px) rotate(90deg);"></div>
  <div id="pahuljice" style="transform: translate(1600px,500px) rotate(45deg);"></div>
  <div id="pahuljice" style="transform: translate(1600px,500px) rotate(-45deg);"></div>


  <div id="pahuljice" style="transform: translate(360px,-100px);"></div>
  <div id="pahuljice" style="transform: translate(360px,-100px) rotate(90deg);"></div>
  <div id="pahuljice" style="transform: translate(360px,-100px) rotate(45deg);"></div>
  <div id="pahuljice" style="transform: translate(360px,-100px) rotate(-45deg);"></div>

  <div id="pahuljice" style="transform: translate(500px,-300px);"></div>
  <div id="pahuljice" style="transform: translate(500px,-300px) rotate(90deg);"></div>
  <div id="pahuljice" style="transform: translate(500px,-300px) rotate(45deg);"></div>
  <div id="pahuljice" style="transform: translate(500px,-300px) rotate(-45deg);"></div>

  <div id="pahuljice" style="transform: translate(600px,-50px);"></div>
  <div id="pahuljice" style="transform: translate(600px,-50px) rotate(90deg);"></div>
  <div id="pahuljice" style="transform: translate(600px,-50px) rotate(45deg);"></div>
  <div id="pahuljice" style="transform: translate(600px,-50px) rotate(-45deg);"></div>

  <div id="pahuljice" style="transform: translate(1000px,-10px);"></div>
  <div id="pahuljice" style="transform: translate(1000px,-10px) rotate(90deg);"></div>
  <div id="pahuljice" style="transform: translate(1000px,-10px) rotate(45deg);"></div>
  <div id="pahuljice" style="transform: translate(1000px,-10px) rotate(-45deg);"></div>

  <div id="pahuljice" style="transform: translate(290px,-60px);"></div>
  <div id="pahuljice" style="transform: translate(290px,-60px) rotate(90deg);"></div>
  <div id="pahuljice" style="transform: translate(290px,-60px) rotate(45deg);"></div>
  <div id="pahuljice" style="transform: translate(290px,-60px) rotate(-45deg);"></div>

  <div id="pahuljice" style="transform: translate(100px,-100px);"></div>
  <div id="pahuljice" style="transform: translate(100px,-100px) rotate(90deg);"></div>
  <div id="pahuljice" style="transform: translate(100px,-100px) rotate(45deg);"></div>
  <div id="pahuljice" style="transform: translate(100px,-100px) rotate(-45deg);"></div>

  <div id="pahuljice" style="transform: translate(1200px,-110px);"></div>
  <div id="pahuljice" style="transform: translate(1200px,-110px) rotate(90deg);"></div>
  <div id="pahuljice" style="transform: translate(1200px,-110px) rotate(45deg);"></div>
  <div id="pahuljice" style="transform: translate(1200px,-110px) rotate(-45deg);"></div>

  <div id="pahuljice" style="transform: translate(1800px,-200px);"></div>
  <div id="pahuljice" style="transform: translate(1800px,-200px) rotate(90deg);"></div>
  <div id="pahuljice" style="transform: translate(1800px,-200px) rotate(45deg);"></div>
  <div id="pahuljice" style="transform: translate(1800px,-200px) rotate(-45deg);"></div>

  <div id="pahuljice" style="transform: translate(1400px,-700px);"></div>
  <div id="pahuljice" style="transform: translate(1400px,-700px) rotate(90deg);"></div>
  <div id="pahuljice" style="transform: translate(1400px,-700px) rotate(45deg);"></div>
  <div id="pahuljice" style="transform: translate(1400px,-700px) rotate(-45deg);"></div>

  <div id="pahuljice" style="transform: translate(800px,-150px);"></div>
  <div id="pahuljice" style="transform: translate(800px,-150px) rotate(90deg);"></div>
  <div id="pahuljice" style="transform: translate(800px,-150px) rotate(45deg);"></div>
  <div id="pahuljice" style="transform: translate(800px,-150px) rotate(-45deg);"></div>


  <div id="pahuljice" style="transform: translate(850px,-30px);"></div>
  <div id="pahuljice" style="transform: translate(850px,-30px) rotate(90deg);"></div>
  <div id="pahuljice" style="transform: translate(850px,-30px) rotate(45deg);"></div>
  <div id="pahuljice" style="transform: translate(850px,-30px) rotate(-45deg);"></div>

  <div id="pahuljice" style="transform: translate(1350px,-160px);"></div>
  <div id="pahuljice" style="transform: translate(1350px,-160px) rotate(90deg);"></div>
  <div id="pahuljice" style="transform: translate(1350px,-160px) rotate(45deg);"></div>
  <div id="pahuljice" style="transform: translate(1350px,-160px) rotate(-45deg);"></div>

  <div id="pahuljice" style="transform: translate(1600px,-50px);"></div>
  <div id="pahuljice" style="transform: translate(1600px,-50px) rotate(90deg);"></div>
  <div id="pahuljice" style="transform: translate(1600px,-50px) rotate(45deg);"></div>
  <div id="pahuljice" style="transform: translate(1600px,-50px) rotate(-45deg);"></div>

  <div id="pahuljice" style="transform: translate(1600px,300px);"></div>
  <div id="pahuljice" style="transform: translate(1600px,300px) rotate(90deg);"></div>
  <div id="pahuljice" style="transform: translate(1600px,300px) rotate(45deg);"></div>
  <div id="pahuljice" style="transform: translate(1600px,300px) rotate(-45deg);"></div>

  <div id="pahuljice" style="transform: translate(1000px,500px);"></div>
  <div id="pahuljice" style="transform: translate(1000px,500px) rotate(90deg);"></div>
  <div id="pahuljice" style="transform: translate(1000px,500px) rotate(45deg);"></div>
  <div id="pahuljice" style="transform: translate(1000px,500px) rotate(-45deg);"></div>


</body>

</html>

html css

Solution 1:^[1]

Use translateX/translateZ/translateY instead tranlate; and also try to use a position:'absolute' in your keyframe.

<div id="pahuljice" style="transform: translateX(1800px,-200px) rotate(90deg);"></div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Leonardo

'Is there a way for me to rotate these snowflakes in a normal way?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]