In 3D world, there are some shapes that are conceptually harder to perceive, hence, implement. One of these shapes is the 3D rounded ball. Unlike the cube, that is actually made out of 6-planes that are positioned in a certain manner to form the cube shape. A ball is actually a bit more complex mathematically, as anywhere you view it from, it is curved; in CSS, there’s no such think as a curve. Yet.
So how do you create a shape that makes the human eye think it’s a ball when it really isn’t? By creating a flat rounded circle, adding light-affected gradient to it and rotating it against the main rotation direction of the whole structure. See for yourself.