CODEWITHSUNDEEP
htmlcss
TAHA SULTAN TEMURI
TAHA SULTAN TEMURI

Reputation: 5191

How to make image 3D using CSS

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: enter image description here

Want to make it like:

enter image description here

Upvotes: 5

Views: 5721

Answers (4)

Kobi
Kobi

Reputation: 138017

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.
  • Transparent light square, so the background effect is visible.
  • On-hover animation effect, just 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>

Upvotes: 6

Kishore Kumar
Kishore Kumar

Reputation: 12874

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

Upvotes: 6

theoretisch
theoretisch

Reputation: 1728

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>

Upvotes: 2

haxxxton
haxxxton

Reputation: 6442

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>

Upvotes: 4

Related Questions