How can I fix my upside down image position using js-CodePudding

I have created a js function and used CSS transform which will show the images like a circle. My Problem is The pictures are upside down because of transform.

This is the current UI:

I want something like this:

You can play with my code: https://jsfiddle.net/fathe4/upma8xfz/3/

const fakeData = [ { _id: "6363d7c30741e9d8bfd189cd", index: 0, picture: "http://atlas-content-cdn.pixelsquid.com/stock-images/white-chair-1VrZXD0-600.jpg", age: 25, }, { _id: "6363d7c33dab3e7ff64e1a70", index: 1, picture: "http://atlas-content-cdn.pixelsquid.com/stock-images/white-chair-1VrZXD0-600.jpg", age: 20, }, { _id: "6363d7c3b36f17137195b4ff", index: 2, picture: "http://atlas-content-cdn.pixelsquid.com/stock-images/white-chair-1VrZXD0-600.jpg", age: 37, }, ];



const displayImages = (data) => {

  let angle = 360 - 90;
  let dangle = 360 / 3;
  let sortingData = data.sort((a, b) => a.age - b.age);
  for (let i = 0; i < sortingData.length;   i) {
    let circleDiv = document.createElement("div");
    angle  = dangle;
    circleDiv.style.transform = `rotate(${angle}deg) translate(${250}px) rotate(${250}deg)`;

    circleDiv.classList.add("circle");
    circleDiv.innerHTML = `<img src=${sortingData[i].picture} alt="" />`;

    document.querySelector(".ciclegraph").appendChild(circleDiv);

  }
};

displayImages(fakeData)

.main {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100vh;
  overflow: hidden;
  align-content: center;
  text-align: center;
}

.ciclegraph {
  position: absolute;
  width: 60%;
  margin: calc(100px / 2   0px);
  animation: rotate 200s linear infinite;
  -webkit-animation: rotate 200s linear infinite;
  -o-animation: rotate 200s linear infinite;
}

.ciclegraph .circle img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250px;
  height: 250px;
  margin: calc(-100px / 2);
}

.ciclegraph:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 2px * 2);
  height: calc(100% - 2px * 2);
  border-radius: 50%;
}

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

CodePudding user response：

That last rotate was unnecessary, you want to rotate it back in a sense, replace your displayImages with this (last rotate is changed in transform)

const displayImages = (data) => {

  let angle = 360 - 90;
  let dangle = 360 / 3;
  let sortingData = data.sort((a, b) => a.age - b.age);
  for (let i = 0; i < sortingData.length;   i) {
    let circleDiv = document.createElement("div");
    angle  = dangle;
    circleDiv.style.transform = `rotate(${angle}deg) translate(${250}px) rotate(${-angle}deg)`;

    circleDiv.classList.add("circle");
    circleDiv.innerHTML = `<img src=${sortingData[i].picture} alt="" />`;

    document.querySelector(".ciclegraph").appendChild(circleDiv);

  }
};

displayImages(fakeData)