Mozilla Demo Studio

  • Submit a Demo

Simple CSS3 3D Cube

Is just a simple CSS3 3D cube with no JavaScript

Built using HTML5, CSS3,

  • 367 views
  • 7 comments

More About This Demo From The Author

A 3D cube made with only CSS3.
The cube turning effect also is made only with CSS3.

Thanks Felipe N. Moura(@felipenmoura), for teaching me about CSS3 3D!

7 comments so far

Register or log in to add your own.

  1. DarrelKremov said,

    Really cool, but sometimes it kind of looks a little not-cubish..
  2. Futekov said,

    Agreed, the value for perspective for this demo shouldn't be more than 2000, currently it's much more for the webkit prefix which makes it look a bit weird at moments.
  3. felipenmoura said,

    You both are testing it on a Google Chrome, aren't you?
    Google chrome has broken its CSS 3D :/
    you can even check the webkit's examples and see them not working...
    Although, it's works quite fine in Firefox 11
  4. Futekov said,

    Chrome's 3d CSS indeed has issues but that's not the issue.
    The code is the following:
    -webkit-perspective : 160000;
    -moz-perspective : 1600;
    -o-perspective : 800;
    -ms-perspective : 800;
    perspective : 800;

    If you look closer, you'll see that the far edges of the cube appear larger than the ones closer to you for both Chrome and Firefox.

    Webkit's value is clearly wrong, as any value above 3-4 thousand does nothing.
    In the case with -moz- the value is wrong again, but this time because it's missing the "px" at the end (known issue with firefox), thus the value is not respected at all.

    Try changing the values of perspective to 1000px for both -webkit- and -moz- and they will look properly.
  5. jaydson said,

    Yep, it seems that Google Chrome is broken for CSS 3D.
    I don't know exactly what is the problem, but i think that is something with graphics card and Chrome.
    In another pc with a good graphics card and a big monitor, it works fine.
    I'll talk to Paul Irish about that, maybe he knows what is happening.
  6. jaydson said,

    Hi.
    You're right.
    I have just updated the code with perspective : 1000px and now it works fine in Google Chrome and Firefox.
    Thanks!
  7. mok20123 said,

    Really good thing, I love it!

Get the Source Code

Download the Source 84.72 KB · ZIP File

Browse the Source

This demo is released under the GPL license.

More by jaydson