3d css level design problem

pdiddles03 · 12-27-2012, 05:27 PM

http://teststuff.freehostingcloud.com/3DTEST/

In the above site, I adjusted the map to look like it's on a 3d plane, my question is, the blue tiles are a separate map from the first one, but I want basically stone blocks to sit on them. I'm trying to get that one specific div to stand straight up, or look like it's standing straight up, from that point I will create another wall on the right side and the top. so it will be the 3d stone. I've tried to do this with everything that I know but can't. I've used skew to make it look like it but the problem is the tiles to the left and right look all wacked out because of the css I am using.

FYI: I know that there is a bunch of code in there right now that's not being used, I did that on purpose because I only wanted u to see what I wanted with the basic stuff.

Thanks!

Old Pedant · 12-27-2012, 09:01 PM

So where are the stone blocks? Whacked out or not, seeing them would be better than seeing nothing there.

Old Pedant · 12-28-2012, 12:50 AM

By the by, you probably don't care too much, but there is no perspective effect at all in MSIE 9, even after I added <!DOCTYPE html> (without it, none of the colors, etc., even showed up in planar fashion).

I don't know how much you *can* skew an image. Dunno if CSS can give it perspective or not. If not, your only real choice may be to just "draw" the surfaces. If you aren't looking for 100% fidelity, you could do that by simply cloning your blue layer "up" a bit higher and then drawing surfaces as appropriate to complete the blocks.

rnd me · 12-28-2012, 07:39 AM

for many blue squares, especially those in the rear stage left, this looks almost right, for others they look "tilted too much" for lack of a better description...

Code:

#left_block {
height: 29px;
width: 18px;
background-image: url(bricks.jpg);
background: blue;
position: absolute;
left: 0px;
-webkit-transform: rotateY(24deg) skew(28deg, 1deg);
border: 1px solid #5f5;
top: -3px;
}

vwphillips · 12-28-2012, 08:03 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
#div {
  position:absolute;left:100px;top:100px;width:100px;height:200px;
}

.dot {
  position:absolute;width:1px;height:1px;background-Color:blue;
}

.line {
  position:absolute;width:1px;height:1px;background-Color:#CCFFFF;
}

/*]]>*/
</style></head>

<body>

<div id="div" ></div>

<script type="text/javascript">
/*<![CDATA[*/

 var obj=document.getElementById('div');

 var slope=0.6;
 var dot=document.createElement('DIV');

 dot.className='dot';

 for (var dots=[],nu=obj.offsetWidth/2,z0=0;z0<nu;z0++){
  dot=dot.cloneNode(false);
  dot.style.left=z0+'px';
  dot.style.top=-z0*slope+nu*slope+'px';
  dot.style.height=obj.offsetHeight-(-z0*slope+nu*slope)+'px';
  obj.appendChild(dot);
  dots[z0]=dot;
 }

 dots=dots.reverse()
 for (var z0=0;z0<dots.length;z0++){
  dot=dots[z0].cloneNode(false);
  dot.style.left=z0+nu+'px';
  dot.style.top=0+'px';
  obj.appendChild(dot);
 }

 var h=dots[z0-1].offsetTop;

 dot=document.createElement('DIV');
 dot.className='line';
 dot.style.top=h+'px';
 dot.style.width=nu+'px';
 obj.appendChild(dot);

 dot=document.createElement('DIV');
 dot.className='line';
 dot.style.left=nu+'px';
 dot.style.top=h+'px';
 dot.style.height=obj.offsetHeight-dots[z0-1].offsetTop+'px';
 obj.appendChild(dot);

 dot=document.createElement('DIV');
 dot.className='line';
 var hyp=Math.sqrt(nu*nu+h*h);
 for (var z1=0;z1<hyp;z1++){
  dot=dot.cloneNode(false);
  dot.style.left=Math.round(nu+nu*z1/hyp)+'px';
  dot.style.top=Math.round(h-h*z1/hyp)+'px';
  obj.appendChild(dot);
 }

/*]]>*/
</script>

</body>

</html>

pdiddles03 · 12-28-2012, 09:45 PM

Quote:

Originally Posted by vwphillips

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
#div {
  position:absolute;left:100px;top:100px;width:100px;height:200px;
}

.dot {
  position:absolute;width:1px;height:1px;background-Color:blue;
}

.line {
  position:absolute;width:1px;height:1px;background-Color:#CCFFFF;
}

/*]]>*/
</style></head>

<body>

<div id="div" ></div>

<script type="text/javascript">
/*<![CDATA[*/

 var obj=document.getElementById('div');

 var slope=0.6;
 var dot=document.createElement('DIV');

 dot.className='dot';

 for (var dots=[],nu=obj.offsetWidth/2,z0=0;z0<nu;z0++){
  dot=dot.cloneNode(false);
  dot.style.left=z0+'px';
  dot.style.top=-z0*slope+nu*slope+'px';
  dot.style.height=obj.offsetHeight-(-z0*slope+nu*slope)+'px';
  obj.appendChild(dot);
  dots[z0]=dot;
 }

 dots=dots.reverse()
 for (var z0=0;z0<dots.length;z0++){
  dot=dots[z0].cloneNode(false);
  dot.style.left=z0+nu+'px';
  dot.style.top=0+'px';
  obj.appendChild(dot);
 }

 var h=dots[z0-1].offsetTop;

 dot=document.createElement('DIV');
 dot.className='line';
 dot.style.top=h+'px';
 dot.style.width=nu+'px';
 obj.appendChild(dot);

 dot=document.createElement('DIV');
 dot.className='line';
 dot.style.left=nu+'px';
 dot.style.top=h+'px';
 dot.style.height=obj.offsetHeight-dots[z0-1].offsetTop+'px';
 obj.appendChild(dot);

 dot=document.createElement('DIV');
 dot.className='line';
 var hyp=Math.sqrt(nu*nu+h*h);
 for (var z1=0;z1<hyp;z1++){
  dot=dot.cloneNode(false);
  dot.style.left=Math.round(nu+nu*z1/hyp)+'px';
  dot.style.top=Math.round(h-h*z1/hyp)+'px';
  obj.appendChild(dot);
 }

/*]]>*/
</script>

</body>

</html>

Wasn't looking for a full rewrite of my code by thanks anyway.

pdiddles03 · 12-28-2012, 10:38 PM

Quote:

Originally Posted by rnd me

for many blue squares, especially those in the rear stage left, this looks almost right, for others they look "tilted too much" for lack of a better description...

Code:

#left_block {
height: 29px;
width: 18px;
background-image: url(bricks.jpg);
background: blue;
position: absolute;
left: 0px;
-webkit-transform: rotateY(24deg) skew(28deg, 1deg);
border: 1px solid #5f5;
top: -3px;
}

That's what my issue was. I wonder if I will just have to put another div on top of the div with the perspective on it.There has to be a way to do this in css without just making an image look like it.

Old Pedant · 12-28-2012, 10:47 PM

Have you updated the URL? Oh, never mind...let me go look...

Well, sort of, you have. But I see no 3D image there. That is, the stone walls don't have any HEIGHT at all. I thought that is what you are after???

If I'm right, could you please update the online code.

See, I'm wondering if the right answer isn't to use JS code to adjust the skew according to position.

rnd me · 12-29-2012, 02:36 AM

Quote:

Originally Posted by pdiddles03

That's what my issue was. I wonder if I will just have to put another div on top of the div with the perspective on it.There has to be a way to do this in css without just making an image look like it.

you need different css on the left corner than on the middle and different yet for the right-side, if you are to maintain the correct center perspective effect i think you are going for.

if you stack 8 dominos on a chess board, one per pawn spot, and then look at the board from the opposite side, about 6 inches above the board, you will notice that the queens's domino is almost a rectangle, but the rook's dominos are opposite trapezoids.

you would be best to set each tile specifically, maybe using javascript to generate your css in a loop. you can probably get away with using the same CSS on 4 squares, which would be 16 zones on a chess board.

if you back your camera up and flatten to a 45deg N @ 45deg W perspective, the whole board can render with a single isometric-perspective css rule.

pdiddles03 · 12-29-2012, 04:58 AM

Figured it out! thank you rnd_me for your help.

Basically in the draw map 2 function, inside of the loops i just have to specify using if statements that when "j" is less then a number, give it a certain style, the next set of numbers, give them a style. To do this I am using:

leftWall.style.webkitTransform = "skew()";