Question

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

我希望用户界面看起来像这样 -

3D Tic Tac Toe Expected 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);
}

但问题是我没有得到预期的结果。 我得到的用户界面远非预期。您可以在此处查看我在JSFiddle上的代码结果 - http://jsfiddle.net/9tLeonhh/embedded/result/

请告诉我如何修复它，以及如何获得我期望的用户界面？

随意编辑小提琴。感谢。

Answer 1

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

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

这里更新了小提琴Demo。

了解更多信息，请查看using CSS transform。

Answer 2

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

通过反复试验，您可以定位和转换所有单元格。对不起，我无法想到任何其他方式。

Google Chrome有其功能＆＃34;检查元素＆＃34;。这会在您更改CSS时主动更新页面。只需右键单击您的页面，它应位于菜单的底部。

编辑：解释原始方法无效的原因

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

使用CSS 3D变换创建3D Tic Tac Toe UI

2 个答案: