Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Jun 2010
    Posts
    121
    Thanks
    0
    Thanked 3 Times in 3 Posts

    3d css level design problem

    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!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    So where are the stone blocks? Whacked out or not, seeing them would be better than seeing nothing there.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,301
    Thanks
    10
    Thanked 586 Times in 567 Posts
    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;
    }
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #6
    Regular Coder
    Join Date
    Jun 2010
    Posts
    121
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by vwphillips View Post
    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.

  • #7
    Regular Coder
    Join Date
    Jun 2010
    Posts
    121
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by rnd me View Post
    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.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,301
    Thanks
    10
    Thanked 586 Times in 567 Posts
    Quote Originally Posted by pdiddles03 View Post
    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.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #10
    Regular Coder
    Join Date
    Jun 2010
    Posts
    121
    Thanks
    0
    Thanked 3 Times in 3 Posts
    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()";


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •