Wrong depth proportion on 3d

Question

I built a game board for 'Checkers'. I would like to rotate it a little bit on its axis (rotateX). After giving it a '120deg' rotation I noticed that the depth is disproportional. All the squares are of the same size, while the closer ones should look BIGGER the the distant ones. What am I doing wrong?

Here is my code: https://jsfiddle.net/w3bow2Lc/

 //init board var counter = 0; for (var i = 0; i < 8; i++) { var tr = $('<tr/>'); for (var j = 0; j < 8; j++) { var td = $('<td/>').attr('class', 'square').attr('id', counter); if (i % 2 == 0) $(td).addClass('even'); else $(td).addClass('odd'); tr.append(td); counter++; } $('#board').append(tr); } //init white soldiers //var soldier = '<svg height="40" width="40" class="soldier" draggable="true"><circle cx="20" cy="20" r="14" fill="white" stroke="black" stroke-width="1" ></circle></svg>'; var soldier = '<div class="soldier white" draggable="true"></div>'; var squares = $('#board td'); for (var i = 0; i < 24; i++) { if ($(squares[i]).hasClass('even') && i % 2 == 0) $(squares[i]).append($(soldier).attr('id', 'soldier' + i)); if ($(squares[i]).hasClass('odd') && i % 2 != 0) $(squares[i]).append($(soldier).attr('id', 'soldier' + i)); } //init black soldiers //var soldier = '<svg height="40" width="40" class="soldier" draggable="true"><circle cx="20" cy="20" r="14" fill="black" stroke="white" stroke-width="1" ></circle></svg>'; var soldier = '<div class="soldier black" draggable="true"></div>'; var squares = $('#board td'); for (var i = 40; i < 64; i++) { if ($(squares[i]).hasClass('even') && i % 2 == 0) $(squares[i]).append($(soldier).attr('id', 'soldier' + i)); if ($(squares[i]).hasClass('odd') && i % 2 != 0) $(squares[i]).append($(soldier).attr('id', 'soldier' + i)); } 

 #board { margin: 50px 100px; //border:15px solid gray; transform-style: preserve-3d; position: absolute; transform: rotateX(120deg); } #board td { <!-- outline: 2px solid white; --> padding: 0; } .square { width: 40px; height: 40px; padding: 0; outline: 1px solid white; } .even:nth-child(2n+1) { background-color: brown; } .even:nth-child(2n+2) { background-color: BlanchedAlmond; } .odd:nth-child(2n+1) { background-color: BlanchedAlmond; } .odd:nth-child(2n+2) { background-color: brown; } .soldier { cursor: pointer; width: 30px; height: 30px; border-radius: 25px; margin: auto; } .white { background-color: white; border: 1px solid black; } .black { background-color: black; border: 1px solid white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id='board'></table> 

Answer 1

You need add a perspective to your parent element. In this case simply add a perspective of 800px to the body. (It would be better to wrap the board in a new element and apply the perspective to that)

body{
    perspective:800px;
}

You will also need to change your transform from transform: rotateX(120deg); to transform: rotateX(-120deg);

Working example here

https://jsfiddle.net/Jcoulterdesign/Lfwewzcn/2/

You can just tweak the perspective amount and rotation until you get the exact look you want, but this will fix the depth issue.

Answer 2

To define a 3d space, you need to set the perspective property:

#board {
  margin: 50px 100px;
  transform-style: preserve-3d;
  position: absolute;
  transform: perspective(600px) rotateX(120deg);
}

Here's an updated JSFiddle .

You can think of the value as how far away the viewer is from the object - the larger the value, the more subtle the perspective effect. Here's a more detailed resource explaining how to use this property, and also the perspective-origin property. Hope this helps!