/

HTML / CSS / JavaScript Tutorial

CSS Property: perspective-origin

[this page | pdf | back links]

The CSS (CSS3) perspective-origin property indicates where a 3D element is notionally placed, based on the x-axis and y-axis. The property applies to the child elements not the original element itself to which this property is attached. It needs to be used in conjunction with the perspective property and only affects 3D transformed elements.

 

Valid property values (other than inherit and initial) are:

 

Value

Description

x-axis y-axis

x-axis defines where the view is placed on the x-axis, y-axis where it is placed on the y-axis.

 

Possible values for x-axis are:

-        left

-        center

-        right

-        length (a CSS length)

-        % (of element size)

 

Possible values for y-axis are:

-        top

-        center

-        bottom

-        length (a CSS length)

-        % (of element size)

 

Default Value:

50% 50%

JavaScript syntax:

e.g. object.style.perspectiveOrigin="20px 40px"

Inherited:

No

Animatable:

Yes

 


NAVIGATION LINKS
Contents | Prev | Next | CSS Properties


Desktop view | Switch to Mobile