使用 CSS 3D 变换创建 3D 井字游戏 UI答案

【问题标题】：Creating a 3D Tic Tac Toe UI using CSS 3D Transforms使用 CSS 3D 变换创建 3D 井字游戏 UI
【发布时间】：2014-09-24 21:33:26
【问题描述】：

我是一个完整的 CSS3 菜鸟，并尝试使用 HTML 和 CSS3 3D 转换创建一个 3D Tic Tac Toe UI。

我希望 UI 看起来像这样-

我使用 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>

这是我的 CSS 代码的一部分，它打算应用所需的 3D 效果-

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);
}

但问题是我没有得到想要的结果。 我得到的 UI 与预期相差甚远。您可以在此处查看我在 JSFiddle 上的代码结果-http://jsfiddle.net/9tLeonhh/embedded/result/

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

随意编辑小提琴。谢谢。

【问题讨论】：

标签： html css 3d css-transforms

【解决方案1】：

首先，您对每个错误的单元格应用变换。

你应该在桌子上应用变换。
对于 3D，您应该设置容器的透视图。
那么你的对象的transform-style 应该设置为'preserve-3d'。

这里更新了小提琴Demo。

更多信息请查看using CSS transform。

【讨论】：

【解决方案2】：

您需要随时转换每个<td>。我认为最简单的方法是用position: relative; 包装在一个div 中，并让每个单元格都为position: absolute;。

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

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

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

当您在表格上使用透视图并在单元格上旋转时。单元格将独立旋转，而不是整个表格。

【讨论】：