CSS Reference
CSS Reference CSS Selectors CSS Reference Aural CSS Web Safe Fonts CSS Units CSS Colors CSS Color Values CSS Color Names CSS Color HEX CSS3 Browser SupportCSS Properties
CSS3 perspective-origin Property
Example
Set a 3D element's base placement:
div
{
perspective:150;
perspective-origin: 10% 10%;
-webkit-perspective:150; /* Safari and Chrome */
-webkit-perspective-origin: 10% 10%; /* Safari and Chrome */
}
{
perspective:150;
perspective-origin: 10% 10%;
-webkit-perspective:150; /* Safari and Chrome */
-webkit-perspective-origin: 10% 10%; /* Safari and Chrome */
}
Try it yourself »
Browser Support
The perspective-origin property is not supported in any browser.
Chrome and Safari support an alternative, the -webkit-perspecitve-origin property.
Definition and Usage
The perspective-origin property defines where a 3D element is based in the x- and the y-axis. This property allows you to change the bottom position of 3D elements.
When defining the perspective-origin property for an element, it is the CHILD elements that are positioned, NOT the element itself.
Note: This property must be used together with the perspective property, and only affects 3D transformed elements!
For Chrome and Safari users: To better understand the perspective-origin property, view a demo.
| Default value: | 50% 50% |
|---|---|
| Inherited: | no |
| Version: | CSS3 |
| JavaScript syntax: | object.style.perspectiveOrigin="10% 10%" |
Syntax
perspective-origin: x-axis y-axis;
| Property Value | Description |
|---|---|
| x-axis | Defining where the view is placed at the x-axis Possible values:
Default value: 50% |
| y-axis | Defining where the view is placed at the y-axis Possible values:
Default value: 50% |
Your suggestion:
Close [X]
Thank You For Helping Us!
Your message has been sent to W3Schools.
Close [X]
