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