Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make image 3D using CSS

Tags:

html

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

like image 856
TAHA SULTAN TEMURI Avatar asked Nov 29 '16 07:11

TAHA SULTAN TEMURI


People also ask

What is rotate3d in CSS?

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.


4 Answers

.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>
like image 180
Kishore Kumar Avatar answered Oct 12 '22 14:10

Kishore Kumar


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>
like image 33
Kobi Avatar answered Oct 12 '22 14:10

Kobi


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>
like image 32
haxxxton Avatar answered Oct 12 '22 15:10

haxxxton


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>
like image 41
theoretisch Avatar answered Oct 12 '22 13:10

theoretisch