Rolling box with CSS3 animation and transforms

Only supported in Safari 5 (iPhone and iPad), Chrome 11 and Firefox 5 (Aurora).

Each vertical line will intersect the centre of the box after a full rotation of 360 degrees. Since each rotating box has a width of 100px, each vertical line appears at 157px intervals (based on π) and 4 complete rotations will happen.

Example 1: Duration 24 seconds

Example 2: Duration 12 seconds

Other similar 2D animations

• Rolling box showing distance in π - viewing.
• Rolling box showing distance in π with inner static box.
• Rolling box with delayed start
• Rolling box and circle that grow over distance

• 2D animations
• CSS3
• CSS Class Test