CSS3 Perspective in Safari on a Mac

Question

Level 1

0 points

CSS3 Perspective in Safari on a Mac

I created a 3D maze for Safari using CSS3 perspective.
The page is at http://www.livescript.co.uk/maze/dark/
It renders well in Safari on a PC, but a friend viewed it on his Mac and it is very different. It is adding the perspective to areas outside of the div it has been set to. It horizontally squashes both the maze's container and the control div, as if they were inside the perspective area.

Does anyone know why this is?

Many Thanks

Message was edited by: DidjMark

Posted on Jul 20, 2010 3:29 AM

Reply

Answer 1

Klaus1

Level 9

52,925 points

Jul 20, 2010 4:19 AM in response to DidjMark

You may already be familiar with this, but if not it may be useful:

http://www.marcofolio.net/css/3danimation_using_purecss3.html

Reply

Answer 2

DidjMark Author

Level 1

0 points

Jul 20, 2010 4:41 AM in response to Klaus1

Thanks 🙂 Although it uses perspective it is not what I'm looking for.

This is where I got the inspiration from....
http://www.paulrhayes.com/experiments/cube-3d/
That works the same in Safari on both my PC and my friends Mac

I had been working on the maze since 2004 using Microsoft's matrix transformations but without perspective. I managed to get that cross-browser in the last couple of weeks thanks to CSS3. While researching I came across the 3D cube page and applied it to the maze.

The one without perspective is at http://www.livescript.co.uk/maze/, which works on most browsers.

Reply

Answer 3

Klaus1

Level 9

52,925 points

Jul 20, 2010 4:45 AM in response to DidjMark

Sorry, I can't take it any further, never having dabbled - I just Googled! 🙂

Reply