如何使用控件控制3D CSS多维数据集

<div id="data-container"></div>

<style>
    #data-container {
        width: 500px;
        height: 500px;
        perspective: 1000px;
    }

    .data-item {
        width: 100px;
        height: 100px;
        background-color: #ccc;
        transform-style: preserve-3d;
        transition: transform 0.5s;
    }
</style>

var dataContainer = document.getElementById("data-container");

for (var i = 0; i < 9; i++) {
    var dataItem = document.createElement("div");
    dataItem.className = "data-item";
    dataItem.style.transform = "rotateY(" + (i * 40) + "deg) translateZ(250px)";
    dataContainer.appendChild(dataItem);
}

<button onclick="rotateData()">旋转</button>

function rotateData() {
    var dataItems = document.getElementsByClassName("data-item");

    for (var i = 0; i < dataItems.length; i++) {
        dataItems[i].style.transform += " rotateY(90deg)";
    }
}