如何使用CSS製作圖像3D

我藉助html表格繪製國際象棋棋盤現在我想讓它成爲3D，這裏是我的CSS和HTML。如何使用CSS製作圖像3D

table { 
 
    margin: 0 auto; 
 
    border-collapse: collapse; 
 
    background: black; 
 
} 
 
td { 
 
    width: 60px; height: 60px; 
 
} 
 
tr:nth-child(odd) td:nth-child(even), 
 
tr:nth-child(even) td:nth-child(odd) { 
 
    background: white; 
 
    width: 59px; 
 
    height: 50px; 
 
}

<table height="488" width="460" style="display:inline-block;border-style:double"> 
 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
</table>

當前結果：

想讓它像：

來源

2016-11-29 DumpsterDiver

你嘗試過觀點和變換旋轉 - > https://css-tricks.com/almanac/properties/p/perspective/ – theoretisch

是的，但我不理解如何使它像這樣 – DumpsterDiver

如果你想，它看起來比你可以從@haxxxton的代碼，並在底部添加一個div像下面一點點3D。

table { 
 
\t margin: 0 auto; 
 
\t border-collapse: collapse; 
 
\t background: black; 
 
\t border:2px double black; 
 
} 
 
td { 
 
\t width: 60px; height: 60px; 
 
} 
 
tr:nth-child(odd) td:nth-child(even), 
 
tr:nth-child(even) td:nth-child(odd) { 
 
\t background: white; 
 
\t width: 59px; 
 
\t height: 59px; 
 
} 
 
.parent { 
 
\t margin:0 auto; 
 
\t height:488px; 
 
\t width:460px; 
 
\t perspective-origin: 50% 50%; 
 
\t perspective: 1000px; 
 
} 
 
.child { 
 
\t transform: rotateX(60deg); 
 
} 
 
#div3 { 
 
    position: relative; 
 
    height: 10px; 
 
    width: 616px; 
 
    margin-left:-61px; 
 
    margin-top:-90px; 
 
    background-color: brown; 
 
    border: 1px solid black; 
 
    }

<div class="parent"> 
 
\t <table class="child" height="488" width="488"> 
 
\t \t <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
\t \t <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
\t \t <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
\t \t <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
\t \t <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
\t \t <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
\t \t <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
\t \t <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
\t </table> 
 
    <div id="div3"></div> 
 
</div>

來源

2016-11-29 07:47:38 theoretisch

使用perspective和rotateX你可以實現你以後。還將表格樣式移動到樣式表中並固定邊框。

PS。更新，以棋盤方格正方形

JSFIDDLE

CSS

table { 
    margin: 0 auto; 
    border-collapse: collapse; 
    background: black; 
    border:2px double black; 
} 
td { 
    width: 60px; height: 60px; 
} 
tr:nth-child(odd) td:nth-child(even), 
tr:nth-child(even) td:nth-child(odd) { 
    background: white; 
    width: 59px; 
    height: 59px; 
} 
.parent { 
    margin:0 auto; 
    height:488px; 
    width:460px; 
    perspective-origin: 50% 50%; 
    perspective: 1000px; 
} 
.child { 
    transform: rotateX(60deg); 
}

HTML

<div class="parent"> 
    <table class="child" height="488" width="488"> 
     <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
     <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
     <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
     <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
     <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
     <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
     <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
     <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
    </table> 
</div>

來源

2016-11-29 07:21:24 haxxxton

.parent { 
 
    margin: -100px auto; 
 
    width: 460px; 
 
    height: 488px; 
 
    perspective: 1000px; 
 
    perspective-origin: 50% 50%; 
 
} 
 
table { 
 
    margin: 0 auto; 
 
    border-collapse: collapse; 
 
    background: #533E29; 
 
} 
 
td { 
 
    width: 60px; 
 
    height: 60px; 
 
} 
 
tr:nth-child(odd) td:nth-child(even), 
 
tr:nth-child(even) td:nth-child(odd) { 
 
    background: #BC8D5E; 
 
    width: 59px; 
 
    height: 50px; 
 
} 
 
.board-border { 
 
    transform: rotateX(60deg); 
 
    background: #96715F; 
 
    box-shadow: 0px 10px 3px 2px #333; 
 
    width: 470px; 
 
    height: 498px; 
 
} 
 
.board-border:after { 
 
    content: ""; 
 
    position: absolute; 
 
    z-index: 5; 
 
    width: 460px; 
 
    height: 488px; 
 
    bottom: 5px; 
 
    left: 5px; 
 
    /* overlay styles */ 
 
    background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.33) 0%, rgba(255, 255, 255, 0.33) 40%, rgba(255, 255, 255, 0) 61%, rgba(255, 255, 255, 0) 100%); 
 
    background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.33) 0%, rgba(255, 255, 255, 0.33) 40%, rgba(255, 255, 255, 0) 61%, rgba(255, 255, 255, 0) 100%); 
 
    background: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.33) 0%, rgba(255, 255, 255, 0.33) 40%, rgba(255, 255, 255, 0) 61%, rgba(255, 255, 255, 0) 100%); 
 
    background: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.33) 0%, rgba(255, 255, 255, 0.33) 40%, rgba(255, 255, 255, 0) 61%, rgba(255, 255, 255, 0) 100%); 
 
    background: linear-gradient(-45deg, rgba(255, 195, 130, 0.33) 0%, rgba(255, 195, 130, 0.33) 40%, rgba(255, 195, 130, 0) 70%, rgba(255, 195, 130, 0) 100%); 
 
}

<div class="parent"> 
 
    <div class="board-border"> 
 
    <table height="488" width="460"> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>

來源

2016-11-29 07:44:35

優秀的先生，這是我提到的令人興奮的。 – DumpsterDiver

當然，這是很難實現的全3D效果。我可以使用實現類似效果：

transform: perspective(600px) rotateX(45deg); - 透視效果。
background: radial-gradient - 用於柔和的照明效果。
透明的淺色方形，所以背景效果是可見的。
懸停動畫效果，只是爲了演示它的行爲。

table { 
 
    margin: 0 120px; 
 
    border-collapse: collapse; 
 
    background: radial-gradient(circle at 70% 90%,#8A6A4A,#4E3A27); 
 
    transform: perspective(600px) rotateX(45deg); 
 
    transition: 0.8s; 
 
} 
 
table:hover { 
 
    transform: perspective(500px) rotateX(60deg) rotateY(-5deg); 
 
} 
 

 
td { 
 
    width: 28px; height: 28px; border:none; 
 
} 
 
tr:nth-child(odd) td:nth-child(even), 
 
tr:nth-child(even) td:nth-child(odd) { 
 
    background: rgba(255,195,130,0.3); 
 
}

<table style="display:inline-block;border-style:double"> 
 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> 
 
</table>

來源

2016-11-29 07:48:27 Kobi

如何使用CSS製作圖像3D

回答

相關問題