I draw chess board with the help of html table now I want to make it 3D here is my css and 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>
Current Result:
Want to make it like:
The rotate3d() CSS function defines a transformation that rotates an element around a fixed axis in 3D space, without deforming it. Its result is a <transform-function> data type.
.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>
Naturally, it is difficult to achieve the full 3D effect. I could achieve a similar effect using:
transform: perspective(600px) rotateX(45deg);
- a perspective effect.background: radial-gradient
- for the soft lighting effect.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>
Using perspective
and rotateX
you can achieve what you're after. Also moved the table styling into the stylesheet and fixed the border.
PS. updated to make the chessboard squares square
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>
And if you want that it looks a little bit more 3D than you can take the code from @haxxxton and add a div at the bottom like below.
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;
}
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With