Web4College

CSS perspective-origin property

src

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

50

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%;
Try it

percentage percentage

40

The perspective origin is at 30% from top side and 40% from left side.

perspective-origin: 30% 40%;
Try it

length length

40

The perspective origin is at 30px from top side and 40px from left side.

perspective-origin: 30px 40px;
Try it

right bottom

The perspective-origin is the bottom right corner. It is the same as perspective-origin: 100% 100%;.

perspective-origin: right bottom;
Try it

left top

The perspective-origin is the top left corner. It is the same as perspective-origin: 0% 0%;.

perspective-origin: left top;
Try it

center top

The perspective-origin is the top center. It is the same as perspective-origin: 50% 0%;.

perspective-origin: center top;
Try it

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;
Try it

Applicable to

It applies to transformable elements.