Rolling box with inner static box with CSS3 animation and transforms

Supported in Safari 5+ (iPhone and iPad), Chrome 11+ and Firefox 5+ and Opera 12.01+. Updated - 10th of August 2012.

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 and the rolling outer box makes 6 complete rotations.

Example 2: Duration 12 seconds and the rolling outer box makes 6 complete rotations

Other similar 2D animations