Your Search Results

    -moz-perspective-origin Redirect 1

    This is an experimental technology
    Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

    Summary

    The perspective-origin CSS property determines the position the viewer is looking at. It is used as the vanishing point by the perspective property.

    • Initial value 50% 50%
    • Applies to transformable elements
    • Inherited no
    • Percentages refer to the size of bounding box
    • Media visual
    • Computed value for <length> the absolute value, otherwise a percentage
    • Animatable yes, as a simple list of a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
    • Canonical order One or two values, with length made absolute and keywords translated to percentages

    Syntax

    Formal syntax: [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ]
    
    perspective-origin: x-position            /* one-value syntax */
    perspective-origin: x-position y-position /* two-value syntax */
    
    When both x-position and y-position are keywords, the following is also valid:
    perspective-origin: y-position x-position
    
    perspective-origin: inherit
    

    Values

    x-position
    Indicates the position of the abscissa of the vanishing point. It can have one of the following values:
    • <percentage> indicating the position relative to the width of the element. The value may be negative.
    • <length> indicating the position using a length value. The value may be negative.
    • left, a keyword being a shortcut for the 0 length value.
    • center, a keyword being a shortcut for the 50% percentage value.
    • right, a keyword being a shortcut for the 100% percentage value.
    y-position
    Indicates the position of the ordinate of the vanishing point. It can have one of the following values:
    • <percentage> indicating the position relative to the height of the element. The value may be negative.
    • <length> indicating the position using a length value. The value may be negative.
    • top, a keyword being a shortcut for the 0 length value.
    • center, a keyword being a shortcut for the 50% percentage value.
    • bottom, a keyword being a shortcut for the 100% percentage value.

    Examples

    perspective-origin:top left; perspective-origin:top; perspective-origin:top right;
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6
    perspective-origin:left; perspective-origin:50% 50%; perspective-origin:right;
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6
    perspective-origin:bottom left; perspective-origin:bottom; perspective-origin:bottom right;
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6

    Specifications

    Specification Status Comment
    CSS Transforms Level 1 Working Draft  

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support 12-webkit 10 (10)-moz
    16 (16)
    10 Not supported (Yes)-webkit
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support 3.0-webkit 10.0 (10)-moz
    16.0 (16)
    ? Not supported (Yes)-webkit

    See also

    Document Tags and Contributors

    Contributors to this page: Sheppy
    Last updated by: Sheppy,
    Hide Sidebar