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.

#CSS digger
Was this article helpful?

 
We are learning perspective-origin property.
×

Ctrl+D