All geek questions in one place

How to make a 3D image using CSS

I draw a chessboard using the 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: enter image description here

Want to do it like:

enter image description here

+5
source share
4 answers

And if you want it to look a bit more 3D than you can take the code from @haxxxton and add the div below as shown 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>
+2
source

Using perspective and rotateX , you can achieve what you need. Also moved the style of the table to the stylesheet and fixed the border.

PS. updated to square squared checkerboard

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>
+4
source

Naturally, it’s hard to achieve a full 3D effect. I could achieve a similar effect using:

  • transform: perspective(600px) rotateX(45deg); - the effect of perspective.
  • background: radial-gradient - for the effect of soft lighting.
  • Transparent light square, so the background effect is visible.
  • An animation effect on the go to demonstrate how it behaves.

 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>
+4
source 

 .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>
+3
source

Source: https://habr.com/ru/post/1260496/

More articles:


All Articles