0

demo

In the above image, I want those 5 texts to rotate in an oval shape infinitely, that oval is just for reference. I'm not that good at CSS, any help would be grateful.

HTML

                   <div class="oval" id="oval">
                       <div class="floating-texts">
                          <span class="text1 text">#text1</span>
                          <span class="text2 text">#text2</span>
                          <span class="text3 text">#text3</span>
                          <span class="text4 text">#text4</span>
                          <span class="text5 text">#text5</span>
                       </div>
                    </div>

css

    .oval {
  top: 20%;
  left: 65%;
  position: absolute;
  border: 2px solid black;
  width: 400px;
  height: 200px;
  background: transparent;
  border-radius: 200px / 100px;
}
.text {
  position: absolute;
  color: black;
  font-size: 1.2rem;
}
.text1 {
 left: 100%;
 top: 50%;
}
.text2 {
  right: 100%;
  top: 60%;
}
.text3 {
  bottom: 90%;
}
.text4 {
  top: 100%;
  left: 40%;
}
.text5 {
  bottom: 100%;
  left: 70%;
}
  • Does this answer your question? [How can I make 4 elements rotate in a circle?](https://stackoverflow.com/questions/13307383/how-can-i-make-4-elements-rotate-in-a-circle) – SKJ Nov 27 '21 at 18:46
  • does offset-path help? – A Haworth Nov 27 '21 at 21:14

0 Answers0