3 Rotating icons around the circle

Sandy — Mon, 15 Jul 2024 09:22:25 +0000

I am using one middle circle image and 3 icons rotating around the middle circle image, now 3 icons not align equally I need to equal distance 120 degree of 360 each icons. I have added JavaScript, html and style below. Please check It will helpful to me.

Reference image below

.slidercircle {
    margin-left: 0px;
    margin-top:0px;
    width: 518px;
    height: 622px;
}

.circle-middle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 95px;
    margin-top: 50px;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    transition: 1s;
    width: 400px;
}


.circle-arround-two-1,
.circle-arround-two-2,
.circle-arround-two-3,
.circle-arround-two-4 {
    cursor: pointer;
    position: absolute;
    border-radius: 50%;
    top: 210px;
    left: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index:9;
}


.circle-arround-two-1 {
    transform: rotate(45deg) translateX(250px) rotate(-45deg);
    -webkit-animation: orbit3 100s linear infinite;
    -moz-animation: orbit3 100s linear infinite;
    -o-animation: orbit3 100s linear infinite;
    animation: orbit2 100s linear infinite;
    transition: 1s;
}

.circle-arround-two-2 {
    transform: rotate(45deg) translateX(-250px) rotate(-45deg);
    -webkit-animation: orbit3 100s linear infinite;
    -moz-animation: orbit3 100s linear infinite;
    -o-animation: orbit3 100s linear infinite;
    animation: orbit3 100s linear infinite;
    transition: 1s;
}

.circle-arround-two-3 {
    transform: rotate(45deg) translateY(250px) rotate(-45deg);
    -webkit-animation: orbit3 100s linear infinite;
    -moz-animation: orbit3 100s linear infinite;
    -o-animation: orbit3 100s linear infinite;
    animation: orbit4 100s linear infinite;
    transition: 1s;
}

.circle-arround-two-4 {
    transform: rotate(45deg) translateY(-250px) rotate(-45deg);
    -webkit-animation: orbit3 100s linear infinite;
    -moz-animation: orbit3 100s linear infinite;
    -o-animation: orbit3 100s linear infinite;
    animation: orbit5 100s linear infinite;
    transition: 1s;
}



@keyframes orbit2 {
    from {
        transform: rotate(0deg) translateX(180px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(180px) rotate(-360deg);
    }
}

@keyframes orbit3 {
    from {
        transform: rotate(0deg) translateX(-180px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(-180px) rotate(-360deg);
    }
}


@keyframes orbit4 {
    from {
        transform: rotate(0deg) translateY(180px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateY(180px) rotate(-360deg);
    }
}


.stopanima {
    animation-play-state: paused !important;
}

<div class="slidercircle">
  <div class="circle-one">
    <div class="circle-arround-one"></div>
  </div>
  <div class="circle-two">
    <a href="#">
      <div class="circle-arround-two-1 anima">
        <img src="https://www.freepikcompany.com/img/cards.svg" class="banner-rotate-img">
      </div>
    </a>
    <a href="#">
      <div class="circle-arround-two-2 anima">
        <img src="https://www.freepikcompany.com/img/cards.svg" class="banner-rotate-img">
      </div>
    </a>
    <a href="#" target="_blank">
      <div class="circle-arround-two-3 anima">
        <img src="https://www.freepikcompany.com/img/cards.svg" class="banner-rotate-img">
      </div>
    </a>
  </div>
  <div class="circle-middle">
    <img src="https://crop-circle.imageonline.co/crop-circle.png" class="banner-mid-img">
  </div>
</div>

<script>
var stopCircle = document.getElementsByClassName('anima');
for (var i = 0; i < stopCircle.length; i++) {
    if (stopCircle[i].matches(':hover')) {}
    stopCircle[i].addEventListener("mouseover", function(event) {
        document.getElementsByClassName('circle-arround-two-1')[0].classList.add("stopanima");
        document.getElementsByClassName('circle-arround-two-2')[0].classList.add("stopanima");
        document.getElementsByClassName('circle-arround-two-3')[0].classList.add("stopanima");
        document.getElementsByClassName('circle-arround-two-4')[0].classList.add("stopanima");
    });
    stopCircle[i].addEventListener("mouseout", function(event) {
        document.getElementsByClassName('circle-arround-two-1')[0].classList.remove("stopanima");
        document.getElementsByClassName('circle-arround-two-2')[0].classList.remove("stopanima");
        document.getElementsByClassName('circle-arround-two-3')[0].classList.remove("stopanima");
        document.getElementsByClassName('circle-arround-two-4')[0].classList.remove("stopanima");
    });
}
</script>

DEV Community: Sandy

3 Rotating icons around the circle