perspective-origin property
Gets or sets one or two values that represent the origin (the vanishing point for the 3-D space) of an object with an perspective property declaration.
This property is read/write.
  |
Syntax
perspective-origin: [ [
<percentage>
|
<length>
| left | center | right ] [
<percentage>
|
<length>
| top | center | bottom ] ? ] | [ [ left | center | right ] || [ top | center | bottom ] ]
Property values
One or two of the following origin values, separated by whitespace.
- length
-
A floating-point number, followed by a supported length unit, that indicates the origin of transformation.
- percentage
-
An integer, followed by a %. The value is a percentage of the total box length (for the first value) or the total box height (for the second value, if specified).
left-
First value only. Equal to 0% or a zero length.
center-
First value only. Equal to 50% or half the length of the box.
right-
First value only. Equal to 100% or the full box length.
top-
Second value only. Equal to 0% or a zero height.
center-
Second value only. Equal to 50% or a half the height of the box.
bottom-
Second value only. Equal to 100% or the full box height.
CSS information
| Applies To | block-level and inline-level elements |
|---|---|
| Media | visual |
| Inherited | no |
| Initial Value | 50% 50% |
Standards information
- CSS Transforms Module, Level 3, Section 11
Remarks
This property does not affect how the object is rendered.
This property has no effect on child elements if the perspective property is not set for the object.
Do not use the Microsoft vendor prefix ("-ms-") before the perspective-origin property. It is supported unprefixed in Internet Explorer 10 and later.
To learn more about Cascading Style Sheets (CSS) transforms in Windows Internet Explorer, see How to bring your webpage to life with CSS transforms, transitions, and animations.
See also
- a
- abbr
- acronym
- address
- b
- bdo
- big
- blockQuote
- br
- button
- cite
- code
- CSSStyleDeclaration
- currentStyle
- dd
- del
- dfn
- div
- dl
- dt
- em
- fieldSet
- form
- i
- img
- input
- ins
- kbd
- label
- li
- map
- noFrames
- noScript
- object
- ol
- p
- pre
- q
- samp
- script
- select
- small
- span
- strong
- style
- sub
- sup
- table
- tBody
- td
- textArea
- tFoot
- th
- tHead
- tr
- tt
- ul
- var
- transform
- How to bring your webpage to life with CSS transforms, transitions, and animations