Till now Webkit based browsers like Chrome and Safari supported CSS 3D transformations, good news for Firefox users latest nightly builds got CSS 3D Transformations (available for 64-bit also), you can download nightly build and test some some CSS 3D examples in the browser.

3D HTML5 logo demo in Firefox

Try some CSS 3D demos in Firefox Nightly

#1. You can see the demo of spinning of HTML5 3D logo as an CSS 3D example.  Enter the values in degrees for X-rotation, Y-rotation and Z-rotation to see how HTML5 spins, you can stop it spinning by clicking on Stop spinning button.

#2. You can try another demo poster circle in Firefox nighty and along side with Chrome browser which is originally written for Webkit.

This is a simple example of how to use CSS transformation and animations to get interesting-looking behavior.

“The three rings are constructed using a simple JavaScript function that creates elements and assigns them a transform that describes their position in the ring. CSS animations are then used to rotate each ring, and to spin the containing element around too.

poster circle css 3d example firefox

Note that you can still select the numbers on the ring; everything remains clickable. “

#3. To celebrate the release of Firefox nightly with support for CSS 3D transformations Mozilla created  Browser Memory game to catch all browsers and the cat, play it and have fun.

browsers memory css 3d game

#4. You can also try 3D city. You can know more about  CSS 3D transformations here.

3D city, css 3D Firefox example

Please share this article

Tweet | Submit to Reddit