The 3D chess app is a hybrid HTML5 and CSS3 app. The board is animated using CSS3 perspective transforms and hardware-accelerated rotations. CSS3 animations are also used to add, move, capture, and remove chess pieces from the board. Board rotations render all chess pieces on an HTML5 <canvas> overlay, moving these animations off the UI thread (onto the GPU).
The app uses a combination of 3D and 2D technologies to provide 3D effects without the development cost of creating full 3D models, such as you might use if you are writing WebGL or DirectX apps.
Currently, the app is implemented for Windows Store. There is not much Win8-dependent platform code, however, so I may port it to IE in a update in the near future.
Check out the sample here
Here is an illustration showing the chessboard in mid-rotation:
The main goal of this app is to simulate playing on a real chess board against an actual person, in which touch-based interaction with the board & chess pieces is preferable to a mouse and feels natural (though a mouse also works). The more specific goals of this app are to demonstrate:
This app does NOT demonstrate:
Possible future enhancements:
My other blog posts about the animation technologies (see Part II if you want more an intro to animations):
Tool-related documentation that was helpful: