我在做一個轉盤迷你游戲。除了最后一個切片比其他切片占用更多的空間之外，其他的都渲染正確。我怎樣才能使最后一片和其他的一樣大呢？

問題: 第12個切片顯示不正確。它看起來比其他的都大一倍。

已經嘗試過:

更改轉換css 這是我的網頁代碼:

const wheel = document.getElementById('wheel');
    const spinButton = document.getElementById('spin');
    const result = document.getElementById('result');
    const slices = document.querySelectorAll('.slice');
    const sliceCount = slices.length;
    let spinning = false;
    let currentSlice = 0;
    let spinTimeout = null;
    let spinTime = 0;
    const spinTimeTotal = 3000;

    function spin() {
        spinning = true;
        spinTime = 0;
        spinTimeout = setTimeout(rotateWheel, 30);
    }

    function rotateWheel() {
        spinTime += 30;
        if (spinTime >= spinTimeTotal) {
            stopRotateWheel();
            return;
        }
        const spinAngle = 360 / sliceCount;
        wheel.style.transform = `rotate(${spinAngle * currentSlice}deg)`;
        currentSlice++;
        if (currentSlice >= sliceCount) {
            currentSlice = 0;
        }
        spinTimeout = setTimeout(rotateWheel, 30);
    }

    function stopRotateWheel() {
        spinning = false;
        clearTimeout(spinTimeout);
        const winSlice = slices[currentSlice];
        result.innerHTML = `You won ${winSlice.innerHTML}!`;
    }

    spinButton.addEventListener('click', () => {
        if (!spinning) {
            spin();
        }
    });

<h1>Spin the Wheel</h1>
<div id="wheel">
    <div class="slice slice1">Option 1</div>
    <div class="slice slice2">Option 2</div>
    <div class="slice slice3">Option 3</div>
    <div class="slice slice4">Option 4</div>
    <div class="slice slice5">Option 5</div>
    <div class="slice slice6">Option 6</div>
    <div class="slice slice7">Option 7</div>
    <div class="slice slice8">Option 8</div>
    <div class="slice slice9">Option 9</div>
    <div class="slice slice10">Option 10</div>
    <div class="slice slice11">Option 11</div>
    <div class="slice slice12">Option 12</div>
</div>
<button id="spin">Spin the Wheel</button>
<div id="result"></div>
CSS

body {
        font-family: sans-serif;
        text-align: center;
        margin: 0;
        padding: 0;
    }

    #wheel {
        position: relative;
        margin: auto;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background-color: #f2f2f2;
        overflow: hidden;
    }

    .slice {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 50%;
        transform-origin: 100% 100%;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        line-height: 150%;
        color: #fff;
        overflow: hidden;
    }

    .slice1 {
        background-color: #ff6384;
        transform: rotate(30deg);
    }

    .slice2 {
        background-color: #ff9f40;
        transform: rotate(60deg);
    }

    .slice3 {
        background-color: #ffcd56;
        transform: rotate(90deg);
    }

    .slice4 {
        background-color: #4bc0c0;
        transform: rotate(120deg);
    }

    .slice5 {
        background-color: #36a2eb;
        transform: rotate(150deg);
    }

    .slice6 {
        background-color: #9966ff;
        transform: rotate(180deg);
    }

    .slice7 {
        background-color: #ff6384;
        transform: rotate(210deg);
    }

    .slice8 {
        background-color: #ff9f40;
        transform: rotate(240deg);
    }

    .slice9 {
        background-color: #ffcd56;
        transform: rotate(270deg);
    }

    .slice10 {
        background-color: #4bc0c0;
        transform: rotate(300deg);
    }

    .slice11 {
        background-color: #36a2eb;
        transform: rotate(330deg);
    }

    .slice12 {
        background-color: #9966ff;
        transform: rotate(360deg);
    }

    #spin {
        display: block;
        margin: 20px auto;
        padding: 10px 20px;
        background-color: #4caf50;
        color: #fff;
        font-size: 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    #result {
        margin-top: 20px;
        font-size: 30px;
        font-weight: bold;
        color: #4caf50;
    }

<h1>Spin the Wheel</h1>
    <div id="wheel">
        <div class="slice slice1">Option 1</div>
        <div class="slice slice2">Option 2</div>
        <div class="slice slice3">Option 3</div>
        <div class="slice slice4">Option 4</div>
        <div class="slice slice5">Option 5</div>
        <div class="slice slice6">Option 6</div>
        <div class="slice slice7">Option 7</div>
        <div class="slice slice8">Option 8</div>
        <div class="slice slice9">Option 9</div>
        <div class="slice slice10">Option 10</div>
        <div class="slice slice11">Option 11</div>
        <div class="slice slice12">Option 12</div>
    </div>
    <button id="spin">Spin the Wheel</button>
    <div id="result"></div>