Home/ Questions/Q 7694485
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T21:19:53+00:00

I am converting a Flash Web App to a Javascript(HTML and CSS) Web App.

  • 0

I am converting a Flash Web App to a Javascript(HTML and CSS) Web App. I have a cube rotation animation working but I have a problem with the perspective.

My Problem: I am not sure which CSS attribute I should use to replicate the Flash versions perspective(please see the 2 images below).

The 2 below images where taken while the cube rotation was occuring and you can see the difference in the perspective(the 2nd image is too wide and should look like the first). You can see a working example here(Note it only works on Chrome or Safari): http://jsfiddle.net/CyyZx/6/

  • The first image was taken from the flash application and displays the CORRECT perspective(that I am trying to achieve in CSS).

enter image description here

  • The 2nd image is taken from my CSS, Javascript and HTML web app and the cube rotates with the INCORRECT perspective. What CSS attribute do I change in order to achieve the above images cube perspective?

enter image description here

Please note: The cube faces have the exact same dimensions as the flash version. I currently use the CSS attributes -webkit-perspective: 0; -webkit-perspective-origin: 0;

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    On your .cubeContainer selector, you have -webkit-perspective: 0;, it should be -webkit-perspective: 1000;.

    This will set the perspective ‘further back’ from the screen, where 0 sets the perspecitve to pretty much where the screen is.

    http://jsfiddle.net/CyyZx/7/

    • 0