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