我正在建造一個圓形旋轉木馬。

我愿意接受更好的解決方案。但是在我目前的方法中，我有一個可以旋轉的主div來旋轉轉盤。在里面，我想沿著圓的周長等間距放置一個組件列表。

我沿著一個軸旋轉組件來實現定位，但是沒有成功。

我期望的輸出與此類似: 預期產出

但是我的輸出如下: 我的輸出

我正在用逆風

ProjectAll是一個信息列表。

Project.tsx

import styles from "../style";
import { Card } from "../components";
import { projectAll } from "../constants";

const getRotationAngle = (len: number) => {
  let positions = [];
  for (let i = 0; i < len; i++) {
    let axis = Math.floor(i * (2 * (180 / len)));
    positions.push(axis);
  }
  return positions;
};

const Project = () => {
  const [Rotation, setRotation] = useState(0);
  const [Active, setActive] = useState();
  const positions = getRotationAngle(projectAll.length);
  const getPrevious = () => {};
  const getNext = () => {};
  const rotateToTop = () => {};

  return (
    <div
      className={`flex-row relative h-[800px]  ${styles.marginX} mt-[50px] `}
    >
      <div className="flex w-full justify-center">
        <p className="text-white text-[64px] text-syne">My Project Work</p>
      </div>
      <div
        className={`flex w-full transform translate-y-1/3 rotate-[${Rotation}deg] `}
      >
        {projectAll.map((item, index) => {
          return (
            <div key={index}>{Card(projectAll[index], positions[index])}</div>
          );
        })}
        <svg
          viewBox="0 0 300 300"
          className="circle w-full aspect-[1/1] rounded-full overflow-hidden"
        >
          <circle
            id="holder"
            className="path"
            cx="151"
            cy="151"
            stroke="white"
            fill="none"
            r="150"
          />
        </svg>
      </div>
      <div className="flex absolute px-3 w-full top-1/2 transform -translate-y-1/2 justify-between items-start ">
        <button className="text-white cursor-pointer" onClick={getPrevious}>
          Previous
        </button>{" "}
        <button className="text-white cursor-pointer" onClick={getNext}>
          Next
        </button>
      </div>
    </div>
  );
};

export default Project;

Cards.tsx

import React from "react";

const Card = (data: { [key: string]: any }, angle: number) => {
  return (
    <div
      className={`h-[85%] absolute left-1/2 transform-gpu -translate-y-[30%] -translate-x-1/2 rotate-[${angle}deg] origin-bottom `}
    >
      <div className="w-[400px] rounded-[30px] border-2 border-white p-6">
        <div className="flex h-[80%] rounded-[30px] justify-around items-center">
          <img
            src={data.image}
            alt={data.title}
            className="h-[60%] rounded-[30px]"
          />
        </div>
        <div className="flex-col h-[20%] rounded-[30px] px-10">
          <p className="text-white text-[20px] text-center">
            Brand Journey Improvements
          </p>
          <p className="text-white text-center">
            Client: {"   "} {data.title}
          </p>
          <p className="text-white text-center">
            Work: {"   "} Branding Logo design
          </p>
        </div>
      </div>
    </div>
  );
};

export default Card;