Safari Technology Demos

Back to Overview
Light Table
Best Viewed: Safari on iOS, Mac OS X, Windows

Light Table

Using CSS3 transforms and transitions, photos can be easily sorted, shuffled, or displayed in a slideshow with just a few lines of CSS and JavaScript. You can use these technologies to quickly and easily create innovative, high-performance animations with a small amount of code that is quick to download and easy to modify and maintain. In Safari on iPad and iPhone, you can combine CSS transforms with DOM touch events to change the position, scale, or orientation of any web page element.

In this example:

  • CSS3 transforms and transitions are used to position and animate photos.
  • DOM touch events enable photo scaling, rotation, and dragging on iOS.

Related Resources