CSS perspective-origin Property

The perspective-origin property establishes the origin for the perspective property. It effectively sets the X and Y position at which the viewer appears to be looking at the children of the element.

Formal syntax: [ left | center | right | top | bottom | <percentage> | <length> ]
 |
   [ left | center | right | <percentage> | <length> ]
   [ top | center | bottom | <percentage> | <length> ]
 |
   [ center | [ left | right ] ] && [ center | [ top | bottom ] ]

perspective-origin: <length>;
perspective-origin: <percentage>;
perspective-origin: bottom;
perspective-origin: center;
perspective-origin: left;
perspective-origin: right;
perspective-origin: top;

• <length>A length value gives a fixed length as the offset. The value for the horizontal and vertical offset represent an offset from the top left corner of the bounding box.
• <percentage>A percentage for the horizontal perspctive offset is relative to the width of the bounding box. A percentage for the vertical offset is relative to height of the bounding box. The value for the horizontal and vertical offset represent an offset from the top left corner of the bounding box.
• bottomComputes to '100%' for the vertical position.
• centerComputes to '50%' ('left 50%') for the horizontal position if the horizontal position is not otherwise specified, or '50%' ('top 50%') for the vertical position if it is.
• leftComputes to '0%' for the horizontal position.
• rightComputes to '100%' for the horizontal position.
• topComputes to '0%' for the vertical position.

.class {
   perspective-origin: center;
}

?

?

?

?

?

• Share on Facebook
• Share on Twitter
• Share on Google+