mozilla
Your Search Results

    -webkit-transform-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 transform-origin CSS property lets you modify the origin for transformations of an element. For example, the transform-origin of the rotate() function is the centre of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value.)

    Not explicitly set values are reset to their corresponding values.

    • Initial value 50% 50% 0
    • 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 ] ] <length>?
    
    transform-origin: x-offset                                   /* One-value syntax */   E.g.  transform-origin: 2px 
    transform-origin: offset-keyword                                                      E.g.  transform-origin: bottom
    
    transform-origin: x-offset y-offset                          /* Two-value syntax */   E.g.  transform-origin: 3cm 2px
    transform-origin: y-offset x-offset-keyword                                           E.g.  transform-origin: 2px left
    transform-origin: x-offset-keyword y-offset                                           E.g.  transform-origin: left 2px
    transform-origin: x-offset-keyword y-offset-keyword                                   E.g.  transform-origin: right top
    transform-origin: y-offset-keyword x-offset-keyword                                   E.g.  transform-origin: top right
    
    transform-origin: x-offset y-offset z-offset                 /* Three-value syntax */ E.g.  transform-origin: 2px 30% 10px
    transform-origin: y-offset x-offset-keyword z-offset                                  E.g.  transform-origin: 2px left 10px
    transform-origin: x-offset-keyword y-offset z-offset                                  E.g.  transform-origin: left 5px -3px
    transform-origin: x-offset-keyword y-offset-keyword z-offset                          E.g.  transform-origin: right bottom 2cm
    transform-origin: y-offset-keyword x-offset-keyword z-offset                          E.g.  transform-origin: bottom right 2cm
    

    Values

    x-offset
    Is a <length> or a <percentage> describing how far from the left edge of the box the origin of the transform is set.
    offset-keyword
    Is one of the left, right, top, bottom or center keyword describing the corresponding offset.
    y-offset
    Is a <length> or a <percentage> describing how far from the top edge of the box the origin of the transform is set.
    x-offset-keyword
    Is one of the left, right or center keyword describing how far from the left edge of the box the origin of the transform is set.
    y-offset-keyword
    Is one of the top, bottom or center keyword describing how far from the top edge of the box the origin of the transform is set.
    z-offset
    Is a <length> (and never a <percentage> which would made the statement invalid) describing how far from the user eye the z=0 origin is set.

    The keywords are convenience shorthands and match the following <percentage> values:

    keyword value
    left 0%
    center 50%
    right 100%
    top 0%
    bottom 100%

    Examples

    See Using CSS transforms for examples.

    Live Examples

    transform: none;
     
    transform: rotate(30deg);
     
    transform: rotate(30deg);
    transform-origin: 0 0;
     
    transform: rotate(30deg);
    transform-origin: 100% 100%;
     
    transform: rotate(30deg);
    transform-origin: -10em -30em;
     
    transform: scale(1.9);
     
    transform: scale(1.9);
    transform-origin: 0 0;
     
    transform: scale(1.9);
    transform-origin: 100% -30%;
     
    transform: skewX(50deg);
     
    transform: skewY(50deg);
    transform-origin: 0 0;
     

    Specifications

    Specification Status Comment
    CSS Transforms Level 1 Working Draft  

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support (Yes) -webkit 3.5 (1.9.1)-moz
    16.0 (16.0)
    9.0-ms
    10.0
    10.5-o
    12.10
    3.1-webkit
    Three-value syntax (Yes) -webkit 10 (10)-moz
    16.0 (16.0)
    10.0 Not supported (Yes) -webkit
    Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support ? ? ? ? ? ?
    Three-value syntax ? ? ? ? Not supported ?
    Note: Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve similar effects.

    See also

    Document Tags and Contributors

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