Html 使用CSS 3D转换创建3D Tic Tac Toe用户界面

我是一个完整的CSS3 noob，尝试使用HTML和CSS3 3D转换创建一个3D Tic-Tac-Toe用户界面

我希望UI看起来像这样-

table {
    text-align: center;
    padding: 5pt 0pt;
    border-spacing: 0pt;
    -webkit-perspective: 200px; /* Chrome, Safari, Opera  */
    perspective: 200px;
}

td {
    width: 8em;
    height: 8em;
    border: 2pt solid #000;
    -webkit-transform: rotateX(45deg);
    transform: rotateX(45deg);
}

我使用HTML表格标签创建块，并使用CSS3

perspective

属性为它们提供3D外观。 下面是我的HTML代码中创建块的部分-

    <table>
        <tr>
            <td>-</td>
            <td>-</td>
            <td>-</td>
        </tr>
        <tr>
            <td>-</td>
            <td>-</td>
            <td>-</td>
        </tr>
        <tr>
            <td>-</td>
            <td>-</td>
            <td>-</td>
        </tr>
    </table>

    <table>
        <tr>
            <td>-</td>
            <td>-</td>
            <td>-</td>
        </tr>
        <tr>
            <td>-</td>
            <td>-</td>
            <td>-</td>
        </tr>
        <tr>
            <td>-</td>
            <td>-</td>
            <td>-</td>
        </tr>
    </table>

    <table>
        <tr>
            <td>-</td>
            <td>-</td>
            <td>-</td>
        </tr>
        <tr>
            <td>-</td>
            <td>-</td>
            <td>-</td>
        </tr>
        <tr>
            <td>-</td>
            <td>-</td>
            <td>-</td>
        </tr>
    </table>

但问题是我没有得到想要的结果我得到的UI远远超出预期。您可以在这里看到我在JSFIDLE上的代码结果-

请告诉我如何修复它，以及如何获得预期的UI

请随意编辑小提琴。

---

谢谢。

您需要在运行过程中转换每一个

。我认为最简单的方法是在div中使用

位置：relative并使每个单元格位于
位置：绝对位置

这样，您可以通过反复试验来定位和转换所有单元。对不起，我想不出别的办法了

谷歌Chrome有它的功能“检查元素”。这会在您更改CSS时主动更新页面。只需右键单击页面，它应该位于菜单底部

编辑：解释为什么原始方法不起作用

在表格上使用透视图并在单元格上旋转时。单元格将独立旋转，而不是整个表格。
首先，对每个错误的单元格应用变换

您应该在表上应用转换。

对于3D，应设置容器的透视图。

然后，应将对象的
变换样式设置为“preserve-3d”

这里是最新的小提琴

更多信息，请查看