[UPDATE] Einar Öberg just sent more information – his company North Kingdom made this with the help of Dinahmoe. There’s also this very cute promo video – this project has very high production values!

Even if this latest game from Google’s Creative Lab (Ursine Diversion Division) didn’t showcase the kinds of things you can get up to with WebRTC and even if this game didn’t have some extremely addictive little tweaks, you’d still want to play Cube Slam simply because Bob the bear is so darned cute. Seriously.

The first few times you play, you might find yourself deliberately losing points just because Bob gets grumpy and a bit sad when you win a point. Lose a couple of times and he’s okay.

If you keep playing, though, you’ll find a nicely implemented variation of possibly the most classic of classic games, Pong. There are a enough power-ups, handicaps and obstacles to keep you playing for as long as you can stand making Bob the Bear sad. And that’s not even mentioning the fact that you can play two-player across the Internet allowing you to slam the cube into your opponents face via webcam. Throw in the fact that the sound is generated dynamically using the Web Audio API and there’s hardly a new API not covered.

Find out more at the Chrome Blog or play at cubeslam.com, made by North Kingdom

Every now and then we run into a demo so nicely polished it simply can’t be ignored, Julian Garnier’s (@juliangarnier) 3D chess set is just that.

The set is a neat replica of Josef Hartwig’s minimalistic design. The game is almost entirely hand built, using only Photon for that beautiful dynamic lighting and Chess.js to add unflawed functionality. The demo is also completely responsive! with transforms all handled with CSS, and the interactions wired in using stock standard javascript (with jQuery).

Julian has also added in some beautiful themes, which are the icing on the cake. You can view (and edit!) the demo on CodePen or prowl though the code on Github

3D Hartwig Chess by Julian Garnier (@juliangarnier)

Here’s a gorgeous new site from Google that showcases their various services, and takes the form of an interactive pop up book.

It seems to be using 3D CSS transformations, so theoretically should work well on mobile (although the mobile optimised version is apparently “coming soon”). I was trying to find out who made it when Chris Heilmann of Mozilla noticed the clever credit hidden in the minified source code – it’s from London studio WeAreHive

As WebGL still isn’t supported by some hold-out browsers (I’m looking at you MSIE and mobile Safari), I’m noticing a trend towards using 3D CSS instead, and Mr Doob seems to have been doing a lot of work on the three.js CSS renderer lately. It’ll be fun to see how that progresses.

Digital Creativity Guide Book from Google /via Chris Heilmann

We’re not quite at the stage where we can fly through the Internet in 3D à la Johnny Mnemonic, diving between skyscrapers of data and along streets of shimmering bytes. Until then, we’ll have to make do with visualising our web pages in 3D which is still pretty futuristic, if you think about it.

3D it! from Edan Kwan is a bookmarklet that uses 3D CSS transforms to turn any web page into a moveable, (partially) rotateable 3D object which displays elements closer to the viewer the deeper they’re nested in the DOM. As it’s just standard JS with CSS doing the graphical heavy-lifting, the page is still fully interactive – hover states, links, selectable text, the lot. It can struggle a bit with larger pages but for the most part, it’s fun to launch it all over the place. Try it out on this page!

Firefox users have had access to something similar since the middle of last year – the Tilt 3D extension* creates a 3D visualisation of the current page using WebGL. Being powered by some more heavy-weight JS, this one is very smooth and completely rotatable but only available in Firefox. Whether it helps in web development depends on your working style but there’s no doubt it’s fun to pretend to be Keanu Reeves.

*As Alex Turnbull points out, the tilt extension now is integrated into the latest version of Firefox.

I’m letting out my inner zombie, and I think you should, too! This brilliant little demo by Steve Wittens uses a pair of large sprite sheets (one for colour, one for opacity) which contain the cross sections of a human head taken by an MRI scanner.

Each slice is drawn into its own canvas using the colour and opacity information from the sprite sheets. CSS 3D is used to position all the slices and line them up next to each other in 3D space, effectively reconstituting the head. JavaScript is then used to update the location and rotation of the slices, as well as switch them on and off.

CSS 3D is something of an unsung hero, I feel. Despite having been implemented in Chrome, Safari, Firefox (and the incoming Internet Explorer 10) as well as iOS and Android devices there are surprisingly few demos out there showcasing its abilities.

When combined with JavaScript it can be an extremely simple yet powerful renderer. In fact Steve is in the middle of attempting to create a CSS 3D renderer for Three.js which is definitely one to follow!

So take a look at the demo, it’s a fascinating (if slightly gross) indicator of what you can get up to with a little CSS 3D and some JavaScript!

All together now: “Brrrraaaaaains!”

This is Your Brain on CSS by Steve Wittens

To continue filling out our tutorial section we’ve posted our second tutorial: Create an iPad optimised game with 3D CSS transforms.

Canvas is great, but its performance on iOS can leave a lot to be desired. This tutorial uses CSS and JavaScript for better iOS performance. Follow along to create a game of exploding puffer fish using divs and 3D CSS transforms.

Like our first tutorial, this one is adapted from Seb’s CreativeJS training workshops.

Our tutorial section is still new so let us know what you think!

Create an iPad optimised game
Preview the game in your browser
(It’s optimised for iPad, so Chrome and Safari are your best bets here.)

A mesmerizing experiment brought to you by @themaninblue:

What I set out to achieve was a neon-spinny-globe thing and I pretty much got there. I even managed to throw some Max Headroom aesthetic into the mix.

It uses 3D CSS transforms, so it’s not going to work everywhere, webkit browsers will be your best bet but your mileage may vary.