3D CSS Transformation?

0 favourites
From the Asset Store
3D Car Pack 1
$2.99 USD
3D models + Rendered Low-Poly Cars in isometric, top-down, and side angles.
  • Thanks Joannesalfa !

    Quite amazing 3D effect ... if you have chrome or safari ios try Here ... it's really not too bad on a iphone 4 !

  • Looks like it could've been done in Construct 2 as well!

  • Explode sound and effect create big lags on Iphone 4 but 3D moving effects without this problem is really smooth ...... sure with some changes as the size which is more for the ipad or a chrome pc and some native "cocoonesque" magic inside it could be great ;-p

  • Looks like it could've been done in Construct 2 as well!

    Are you saying C2 is already implemented 3D CSS Transformations?

  • Joannesalfa - no, 3D CSS transforms are slower and use more memory than a hardware-accelerated canvas - so we're sticking to the 2D canvas for now.

  • Joannesalfa - no, 3D CSS transforms are slower and use more memory than a hardware-accelerated canvas - so we're sticking to the 2D canvas for now.

    Are you serious? i tried it 3D CSS on my iPod Touch 4 , it looks faster than Canvas, even can make primtive 3D objects using CSS without webGL.

    CSS3D consumes more memory, is true.

    If you're trying to target mobile, for example, CSS animations are your only choice because Canvas is too slow in general.

    I know we can wait HTML5 goes to be 100% in 2014, well, actually, i believe it cannot guarantee the peformance on mobile devices from 2011-2012 that support latest HTML5.

    Maybe CSS is another solution for mobile devices that don't need to go appstore.

  • If both CSS transformations and canvas 2D are GPU accelerated (which I think is true in Safari on iOS when not using PhoneGap), they should perform about the same. However since CSS has the extra overhead of being in the DOM tree, I would expect it to perform worse when using many sprites.

  • Ashley, Joannesalfa : CSS 3D transform are indeed hardware accelerated on iOS. However, you must be careful with them, because WebKit falls back to CPU when you mixed them with other DOM transform, it depends.

    For example, text & box shadow makes everything back to the CPU.If the 3D transform is performed alone, everything is fine, but if the transform is performed over another transform, there's a performance hit, and so on...

    However, it's pretty easy to hardware accelerate any transform, when it's possible.

    If you just add

    -webkit-transform: translateZ(0);

    to your CSS transform, even if that transform doesn't do anything, the matrix transformation involved activate the hardware acceleration.

    So, if you want to accelerate the transform applied to a div, you simply need to do that in your CSS:

    div {

         -webkit-transform : translateZ(0);

         -o-transform : translateZ(0);

         -moz-transform : translateZ(0);

         transform : translateZ(0);


  • Here is another post you may want to test it, i tried it with C2, performance boost is almost considered but little and it bothers to adjust the screen


  • I see Ashley's point in wanting to stick with optimizing the canvas himself over trying to fight with the browser over how it handles CSS3 tricks, but I'm curious how you would accomplish some of the simple but effective CSS 3D tricks such as a 3D card flip that only requires 2 images (front and back) vs having to trying and animate that with sprite frames.

  • Just found this thread by coincidence.

    I'm wondering how hard it would be to add Sprite3D.js to an existing project.

    Has someone gotten CSS 3D transformations to work with Construct 2 in that fashion?

  • This would indeed be very interesting for dynamic effects for the games and perhaps more appealing for its 3D feel but I wouldnt consider this too neccessary if it lowers the perfomance of a 2D game...

    But if it could do something like this


    then id totaly love it :D

  • Miu3

    Great, now Im going to have that song in my head for the rest of the day.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Oh then you should check the other levels from the game rhythm heaven fever for more catchy music :D

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)