我創建了一個 js 函式并使用了 CSS 變換，它將影像顯示為一個圓圈。我的問題是圖片因為變換而顛倒了。
這是當前的用戶界面：
我想要這樣的東西：
您可以使用我的代碼：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="如何使用js修復倒置的影像位置" />`;
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 class="main">
<div class="ciclegraph"></div>
</div>uj5u.com熱心網友回復：
最后一次旋轉是不必要的，你想在某種意義上把它旋轉回來，用這個替換你的 displayImages （最后一次旋轉在變換中改變）
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="如何使用js修復倒置的影像位置" />`;
document.querySelector(".ciclegraph").appendChild(circleDiv);
}
};
displayImages(fakeData)
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/527473.html
上一篇：hr在div中垂直居中