CSSPLAY

CSS DEMOS › 3D Animated Cube for Internet Explorer IE10

Date : 11th January 2013

For all modern browsers

This demo is too wide for your mobile screen.
Please view on a tablet or PC.

Information

Just to show what a pain it is to style a 3D animation in Internet Explorer IE10 without being able to use 'preserve-3d'.

This simple animated cube requires animation applied separately to each side. Whereas with 'preserve-3d' it can be aplied to the parent element only and so just have one animation.

Imagine the difficulty in producing and animating a 3D truncated icosahedron.

I think that support for 'preserve-3d' is a must for 3D and Internet Explorer IE10 should be updated as soon as possible.

This is smooth in IE10,Chrome and Safari. Firefox needs to improve on its rendering to match these browsers.

Copyright

Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
   A support donation is now required for this demonstration.
2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a support donation is required.
3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.