Home/ Questions/Q 4017624
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T09:53:02+00:00

I’m trying to do Isometric 3D in CSS, here is what I have right

  • 0

I’m trying to do Isometric 3D in CSS, here is what I have right now :
http://jsfiddle.net/AagGZ/1/ (webkit only for testing)

I’m basically using the box-shadow, 1px by 1px to create the 3D effect, this seems very hacky to me. When animating, I’m trying to add new layers of 1px, so the animation fails (not really nice).

Is there a better way to implement that ? I thought of CSS Matrix with before and after css content and added divs.

This is supposed to be a nice add to my project, not the basic function, so I’m okay with it not working below IE9.

Thanks for your help.

EDIT: I reopened the question because the fact that you need to have a solid color background is a bit a problem, before and after filter create big “invisibile” white arrows, and it becames a pain really fast when you have different backgrounds on different part of the sites or when you want to change the background on hover of another element.
I’m going back to my version for now and disabling the animation.
Any ideas are welcome !

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Alright, this is what I’ve got, based on Duopixel’s use of before and after filters but with the borders actually living on the before and after blocks so that I don’t have a problem with transparency.

    : http://jsfiddle.net/BXUdP/65/

    Why I like it : no problem with transparency, works in IE8.
    The animation only works in Firefox 4 for now though, there is a bug whith Chrome which cannot animates before and after filters. But a fix is planned for the next milestone, so it degrades gracefully enough for now.

    • 0