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

Question

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

我想要的UI看起来像这 -

我使用HTML表格标记来创建块，CSS3 perspective财产给他们一个三维外观。 这里是我的HTML代码的一部分创建blocks-

<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/

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

随意编辑小提琴。 谢谢。

Answer 1

您将需要随时转换每一个<td>。我认为最简单的方法是将包装与position: relative;分隔，并且每个单元都是position: absolute;。

通过这种方式，您可以通过试验和错误来定位和转换所有单元格。对不起，我想不出别的办法。

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

编辑：解释为什么原来的方法是行不通的

当你在桌子上使用的角度和旋转上的细胞。单元格将独立旋转，而不是整个表格。

Answer 2

首先，你在每个错误的单元上应用变换。

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

这里是更新小提琴Demo。

欲了解更多关于using CSS transform。