CSS perspective-origin property
Description
CSS perspective-origin property represents the origin of perspective property. This point is located with respect to top and left edges of the element where a user seems to be looking at the transformation of children elements.
There are two possible values (X and Y). If only one value is specified, the second one is assumed to be the 'center'.
Syntax
perspective-origin : [ percentage | length | left | center | right] [percentage | length | top | center | bottom]
Property values
percentage percentageDefault
-
The perspective origin is at 50% from top side and 50% from left side. It is the same as perspective-origin: center center;.
perspective-origin: 50% 50%;
percentage percentage
-
The perspective origin is at 30% from top side and 40% from left side.
perspective-origin: 30% 40%;
length length
-
The perspective origin is at 30px from top side and 40px from left side.
perspective-origin: 30px 40px;
right bottom
-
The perspective-origin is the bottom right corner. It is the same as perspective-origin: 100% 100%;.
perspective-origin: right bottom;
left top
-
The perspective-origin is the top left corner. It is the same as perspective-origin: 0% 0%;.
perspective-origin: left top;
center top
-
The perspective-origin is the top center. It is the same as perspective-origin: 50% 0%;.
perspective-origin: center top;
top
-
Since the second value is not present, it is assumed to be 'center'. It is the same as perspective-origin: center top;.
perspective-origin: top;
Applicable to
It applies to transformable elements.
From web4college, the free CSS digger
Bookmark this page
Ctrl+D
