如何使用CSS制作图像3D

Question

我在html表的帮助下绘制棋盘现在我想在这里制作3D是我的CSS和HTML。

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>

目前的结果：

想要像：

Answer 1

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

Answer 2

＆＃13;

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

当然，很难实现完整的3D效果。我可以使用：

实现类似的效果

• transform: perspective(600px) rotateX(45deg); - 透视效果。
• background: radial-gradient - 用于柔和的灯光效果。
• 透明光方块，因此背景效果可见。
• 悬停动画效果，只是为了演示它的行为方式。

＆＃13;

＆＃13;

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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

如果你想要它看起来更像3D，你可以从@haxxxton获取代码并在底部添加一个div，如下所示。

＆＃13;

＆＃13;

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);
}
#div3 { 
  position: relative;
    height: 10px;
    width: 616px;
    margin-left:-61px;
    margin-top:-90px;
    background-color: brown;
    border: 1px solid black;
  }

＆＃13;

<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 id="div3"></div>
</div>

＆＃13;

＆＃13;

＆＃13;