如何使用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

回答

相关问题