As we started exploring in the previous chapter, CSS3 introduces the possibility to move our HTML elements in a three-dimensional space. We can now move and rotate them around each of the three axes, namely, x, y, and z. While dealing with movement around x and y axes is quite easy to figure out, things become a little messy when the z axis comes into play.
Moving an element along the z axis means getting it closer to or farther away from our viewpoint, but this action has some hidden problems, for example, take the following statement:
#element{
transform: translateZ(100px);
}How can we imagine moving an object of a distance measured in pixels towards us? To solve this dilemma, W3C has introduced a property called perspective that basically tells the browser what distance we're observing the page from.
So if we set 500px as the perspective property, objects placed at the z axis with a distance of 250 pixels will look twice as big, and objects placed at the z axis...