Rolling box with inner static box (version 2) 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.

Duration 60 seconds and the rolling outer box makes 1200 complete rotations or an average of 40 rotations per second.

Other similar 2D animations