Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

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
Sign in to Comment

Related questions

How to create a rounded Chevron shape [duplicate]
loading Spinner - always keep in the middle of the screen even while scrolling the page
Placing text under image that is floating left
CSS background-position top right corner
Bootstrap Radio Button uncheck by jQuery
Run a file:// from http://localhost/
HTML - JS How to open an image in an image popup by clicking on it?
How to call function inside function through only HTML
How to know if a DOM element mounted to tree
Header that stays fixed in place as navigating through pages (it is never reloaded)
Javascript delete a table tbody tag
Test automation html element selectors. Element ID or DataAttribute [closed]
Javascript function is undefined on onclick event of anchor tag
Prevent elements from stretching to 100% width of their flex container
HTML5 input type date disable dates before today
How to Place Two Input Fields Side-by-Side
Remove blue border appearing around element when clicked
Can we have one click recaptcha only - not the picture puzzle captcha after it
How to get the text of multiple elements split by delimiter using jQuery?
JavaScript function does not work when used inside onclick attribute

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!