ANIMATED EFFECTS USING CSS3 - Practical CSS3: Develop and Design - page 168

FIGURE 5.12 The perspective
property in effect.
Finally, let's look at perspective-origin . The perspective-origin property
allows you to change the position of the perspective viewpoint. Returning to the
awesome Eye of Sauron and cone metaphor, changing to perspective-origin
effectively changes the positioning of the cone apex.
The default value of perspective-origin is center , and you can use the same
values for it as you can for transform-origin (units, keywords, percentages; see
the earlier sidebar “A Note About transform-origin” for more details). To get an
idea of the effect this property has, look at the perspective-origin.html file. This
file is similar to the perspective-property.html file, but it has some extra proper-
ties/rules added:
#perspective-wrap {
perspective-origin: 0% center;
: ;
transition: 3s all;
}
#perspective-wrap:hover {
perspective-origin: 100% center;
}