{
"transform-box": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/properties/transform-box.json",
"name": "transform-box",
"slug": "CSS/transform-box",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box",
"summary": "The transform-box CSS property defines the layout box to which the transform, individual transform properties translate,scale, and rotate, and transform-origin properties relate.",
"support": {
"chrome": {
"version_added": "64"
},
"chrome_android": "mirror",
"edge": "mirror",
"firefox": {
"version_added": "55"
},
"firefox_android": "mirror",
"ie": {
"version_added": false
},
"oculus": "mirror",
"opera": "mirror",
"opera_android": "mirror",
"safari": {
"version_added": "11"
},
"safari_ios": "mirror",
"samsunginternet_android": "mirror",
"webview_android": "mirror",
"edge_blink": {
"version_added": "79"
}
},
"title": "transform-box"
}
],
"transform-origin-property": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/properties/transform-origin.json",
"name": "transform-origin",
"slug": "CSS/transform-origin",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin",
"summary": "The transform-origin CSS property sets the origin for an element's transformations.",
"support": {
"chrome": [
{
"version_added": "36"
},
{
"prefix": "-webkit-",
"version_added": "1"
}
],
"chrome_android": "mirror",
"edge": {
"version_added": "12"
},
"firefox": [
{
"version_added": "16"
},
{
"prefix": "-webkit-",
"version_added": "49"
},
{
"prefix": "-moz-",
"version_added": "3.5"
}
],
"firefox_android": "mirror",
"ie": [
{
"version_added": "10"
},
{
"prefix": "-ms-",
"version_added": "9"
}
],
"oculus": "mirror",
"opera": [
{
"version_added": "23"
},
{
"prefix": "-webkit-",
"version_added": "15"
},
{
"version_added": "12.1",
"version_removed": "15"
},
{
"prefix": "-o-",
"version_added": "10.5",
"version_removed": "15"
}
],
"opera_android": [
{
"version_added": "24"
},
{
"prefix": "-webkit-",
"version_added": "15"
},
{
"version_added": "12.1",
"version_removed": "15"
},
{
"prefix": "-o-",
"version_added": "11",
"version_removed": "14"
}
],
"safari": [
{
"version_added": "9"
},
{
"prefix": "-webkit-",
"version_added": "2"
}
],
"safari_ios": "mirror",
"samsunginternet_android": "mirror",
"webview_android": [
{
"version_added": "4.4"
},
{
"prefix": "-webkit-",
"version_added": "37"
}
],
"edge_blink": [
{
"version_added": "79"
},
{
"prefix": "-webkit-",
"version_added": "79"
}
]
},
"title": "transform-origin"
},
{
"engines": [
"blink",
"gecko"
],
"partial": [
"webkit"
],
"filename": "svg/attributes/presentation.json",
"name": "transform-origin",
"slug": "SVG/Attribute/transform-origin",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform-origin",
"summary": "The transform-origin SVG attribute sets the origin for an item's transformations.",
"support": {
"chrome": {
"version_added": true
},
"chrome_android": "mirror",
"edge": "mirror",
"firefox": {
"version_added": "77"
},
"firefox_android": {
"version_added": false
},
"ie": {
"version_added": null
},
"oculus": "mirror",
"opera": "mirror",
"opera_android": "mirror",
"safari": {
"version_added": true,
"partial_implementation": true,
"notes": "Does not work with transform SVG presentation attribute. Only works with transform CSS property. See bug 201854."
},
"safari_ios": "mirror",
"samsunginternet_android": "mirror",
"webview_android": "mirror",
"edge_blink": {
"version_added": true
}
},
"title": "transform-origin"
}
],
"transform-property": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/properties/transform.json",
"name": "transform",
"slug": "CSS/transform",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/transform",
"summary": "The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.",
"support": {
"chrome": [
{
"version_added": "36"
},
{
"prefix": "-webkit-",
"version_added": "1"
}
],
"chrome_android": "mirror",
"edge": {
"version_added": "12"
},
"firefox": [
{
"version_added": "16"
},
{
"prefix": "-webkit-",
"version_added": "49"
}
],
"firefox_android": "mirror",
"ie": [
{
"version_added": "10",
"notes": "Internet Explorer does not support the global values initial and unset."
},
{
"prefix": "-webkit-",
"version_added": "11"
},
{
"prefix": "-ms-",
"version_added": "9",
"notes": "Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve a similar effect."
}
],
"oculus": "mirror",
"opera": [
{
"version_added": "23"
},
{
"prefix": "-webkit-",
"version_added": "15"
},
{
"version_added": "12.1",
"version_removed": "15"
},
{
"prefix": "-o-",
"version_added": "10.5",
"version_removed": "15"
}
],
"opera_android": [
{
"version_added": "24"
},
{
"prefix": "-webkit-",
"version_added": "14"
},
{
"version_added": "12.1",
"version_removed": "14"
},
{
"prefix": "-o-",
"version_added": "11",
"version_removed": "14"
}
],
"safari": [
{
"version_added": "9"
},
{
"prefix": "-webkit-",
"version_added": "3.1"
}
],
"safari_ios": [
{
"version_added": "9"
},
{
"prefix": "-webkit-",
"version_added": "3.2"
}
],
"samsunginternet_android": "mirror",
"webview_android": [
{
"version_added": "4.4"
},
{
"prefix": "-webkit-",
"version_added": "2",
"notes": "Android 2.3 has a bug where input forms will \"jump\" when typing, if any container element has a -webkit-transform."
}
],
"edge_blink": [
{
"version_added": "79"
},
{
"prefix": "-webkit-",
"version_added": "79"
}
]
},
"title": "transform"
}
],
"funcdef-transform-matrix": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/types/transform-function.json",
"name": "matrix",
"slug": "CSS/transform-function/matrix",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix",
"summary": "The matrix() CSS function defines a homogeneous 2D transformation matrix. Its result is a data type.",
"support": {
"chrome": {
"version_added": "1"
},
"chrome_android": "mirror",
"edge": {
"version_added": "12"
},
"firefox": {
"version_added": "3.5",
"notes": "Before Firefox 16, the translation values of matrix() could be <length>s, in addition to the standard <number>."
},
"firefox_android": {
"version_added": "4"
},
"ie": {
"version_added": "9"
},
"oculus": "mirror",
"opera": {
"version_added": "10.5"
},
"opera_android": {
"version_added": "11"
},
"safari": {
"version_added": "3.1"
},
"safari_ios": {
"version_added": "3.2"
},
"samsunginternet_android": "mirror",
"webview_android": {
"version_added": "2"
},
"edge_blink": {
"version_added": "79"
}
},
"title": "matrix()"
}
],
"funcdef-transform-rotate": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/types/transform-function.json",
"name": "rotate",
"slug": "CSS/transform-function/rotate",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate",
"summary": "The rotate() CSS function defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it. Its result is a data type.",
"support": {
"chrome": {
"version_added": "1"
},
"chrome_android": "mirror",
"edge": {
"version_added": "12"
},
"firefox": {
"version_added": "3.5"
},
"firefox_android": "mirror",
"ie": {
"version_added": "9"
},
"oculus": "mirror",
"opera": {
"version_added": "10.5"
},
"opera_android": {
"version_added": "11"
},
"safari": {
"version_added": "3.1"
},
"safari_ios": {
"version_added": "3.2"
},
"samsunginternet_android": "mirror",
"webview_android": {
"version_added": "2"
},
"edge_blink": {
"version_added": "79"
}
},
"title": "rotate()"
}
],
"funcdef-transform-scale": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/types/transform-function.json",
"name": "scale",
"slug": "CSS/transform-function/scale",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale",
"summary": "The scale() CSS function defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by a vector, it can resize the horizontal and vertical dimensions at different scales. Its result is a data type.",
"support": {
"chrome": {
"version_added": "1"
},
"chrome_android": "mirror",
"edge": {
"version_added": "12"
},
"firefox": {
"version_added": "3.5"
},
"firefox_android": "mirror",
"ie": {
"version_added": "9"
},
"oculus": "mirror",
"opera": {
"version_added": "10.5"
},
"opera_android": {
"version_added": "11"
},
"safari": {
"version_added": "3.1"
},
"safari_ios": {
"version_added": "3.2"
},
"samsunginternet_android": "mirror",
"webview_android": {
"version_added": "2"
},
"edge_blink": {
"version_added": "79"
}
},
"title": "scale()"
}
],
"funcdef-transform-scalex": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/types/transform-function.json",
"name": "scaleX",
"slug": "CSS/transform-function/scaleX",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleX",
"summary": "The scaleX() CSS function defines a transformation that resizes an element along the x-axis (horizontally). Its result is a data type.",
"support": {
"chrome": {
"version_added": "1"
},
"chrome_android": "mirror",
"edge": {
"version_added": "12"
},
"firefox": {
"version_added": "3.5"
},
"firefox_android": "mirror",
"ie": {
"version_added": "9"
},
"oculus": "mirror",
"opera": {
"version_added": "10.5"
},
"opera_android": {
"version_added": "11"
},
"safari": {
"version_added": "3.1"
},
"safari_ios": {
"version_added": "3.2"
},
"samsunginternet_android": "mirror",
"webview_android": {
"version_added": "2"
},
"edge_blink": {
"version_added": "79"
}
},
"title": "scaleX()"
}
],
"funcdef-transform-scaley": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/types/transform-function.json",
"name": "scaleY",
"slug": "CSS/transform-function/scaleY",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleY",
"summary": "The scaleY() CSS function defines a transformation that resizes an element along the y-axis (vertically). Its result is a data type.",
"support": {
"chrome": {
"version_added": "1"
},
"chrome_android": "mirror",
"edge": {
"version_added": "12"
},
"firefox": {
"version_added": "3.5"
},
"firefox_android": "mirror",
"ie": {
"version_added": "9"
},
"oculus": "mirror",
"opera": {
"version_added": "10.5"
},
"opera_android": {
"version_added": "11"
},
"safari": {
"version_added": "3.1"
},
"safari_ios": {
"version_added": "3.2"
},
"samsunginternet_android": "mirror",
"webview_android": {
"version_added": "2"
},
"edge_blink": {
"version_added": "79"
}
},
"title": "scaleY()"
}
],
"funcdef-transform-skew": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/types/transform-function.json",
"name": "skew",
"slug": "CSS/transform-function/skew",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew",
"summary": "The skew() CSS function defines a transformation that skews an element on the 2D plane. Its result is a data type.",
"support": {
"chrome": {
"version_added": "1"
},
"chrome_android": "mirror",
"edge": {
"version_added": "12"
},
"firefox": {
"version_added": "3.5",
"notes": "Firefox 14 removed experimental support for skew(), but it was reintroduced in Firefox 15."
},
"firefox_android": {
"version_added": "4"
},
"ie": {
"version_added": "9"
},
"oculus": "mirror",
"opera": {
"version_added": "10.5"
},
"opera_android": {
"version_added": "11"
},
"safari": {
"version_added": "3.1"
},
"safari_ios": {
"version_added": "3.2"
},
"samsunginternet_android": "mirror",
"webview_android": {
"version_added": "2"
},
"edge_blink": {
"version_added": "79"
}
},
"title": "skew()"
}
],
"funcdef-transform-skewx": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/types/transform-function.json",
"name": "skewX",
"slug": "CSS/transform-function/skewX",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewX",
"summary": "The skewX() CSS function defines a transformation that skews an element in the horizontal direction on the 2D plane. Its result is a data type.",
"support": {
"chrome": {
"version_added": "1"
},
"chrome_android": "mirror",
"edge": {
"version_added": "12"
},
"firefox": {
"version_added": "3.5"
},
"firefox_android": "mirror",
"ie": {
"version_added": "9"
},
"oculus": "mirror",
"opera": {
"version_added": "10.5"
},
"opera_android": {
"version_added": "11"
},
"safari": {
"version_added": "3.1"
},
"safari_ios": {
"version_added": "3.2"
},
"samsunginternet_android": "mirror",
"webview_android": {
"version_added": "2"
},
"edge_blink": {
"version_added": "79"
}
},
"title": "skewX()"
}
],
"funcdef-transform-skewy": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/types/transform-function.json",
"name": "skewY",
"slug": "CSS/transform-function/skewY",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewY",
"summary": "The skewY() CSS function defines a transformation that skews an element in the vertical direction on the 2D plane. Its result is a data type.",
"support": {
"chrome": {
"version_added": "1"
},
"chrome_android": "mirror",
"edge": {
"version_added": "12"
},
"firefox": {
"version_added": "3.5"
},
"firefox_android": "mirror",
"ie": {
"version_added": "9"
},
"oculus": "mirror",
"opera": {
"version_added": "10.5"
},
"opera_android": {
"version_added": "11"
},
"safari": {
"version_added": "3.1"
},
"safari_ios": {
"version_added": "3.2"
},
"samsunginternet_android": "mirror",
"webview_android": {
"version_added": "2"
},
"edge_blink": {
"version_added": "79"
}
},
"title": "skewY()"
}
],
"funcdef-transform-translate": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/types/transform-function.json",
"name": "translate",
"slug": "CSS/transform-function/translate",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate",
"summary": "The translate() CSS function repositions an element in the horizontal and/or vertical directions. Its result is a data type.",
"support": {
"chrome": {
"version_added": "1"
},
"chrome_android": "mirror",
"edge": {
"version_added": "12"
},
"firefox": {
"version_added": "3.5"
},
"firefox_android": "mirror",
"ie": {
"version_added": "9"
},
"oculus": "mirror",
"opera": {
"version_added": "10.5"
},
"opera_android": {
"version_added": "11"
},
"safari": {
"version_added": "3.1"
},
"safari_ios": {
"version_added": "3.2"
},
"samsunginternet_android": "mirror",
"webview_android": {
"version_added": "2"
},
"edge_blink": {
"version_added": "79"
}
},
"title": "translate()"
}
],
"funcdef-transform-translatex": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/types/transform-function.json",
"name": "translateX",
"slug": "CSS/transform-function/translateX",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX",
"summary": "The translateX() CSS function repositions an element horizontally on the 2D plane. Its result is a data type.",
"support": {
"chrome": {
"version_added": "1"
},
"chrome_android": "mirror",
"edge": {
"version_added": "12"
},
"firefox": {
"version_added": "3.5"
},
"firefox_android": "mirror",
"ie": {
"version_added": "9"
},
"oculus": "mirror",
"opera": {
"version_added": "10.5"
},
"opera_android": {
"version_added": "11"
},
"safari": {
"version_added": "3.1"
},
"safari_ios": {
"version_added": "3.2"
},
"samsunginternet_android": "mirror",
"webview_android": {
"version_added": "2"
},
"edge_blink": {
"version_added": "79"
}
},
"title": "translateX()"
}
],
"funcdef-transform-translatey": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/types/transform-function.json",
"name": "translateY",
"slug": "CSS/transform-function/translateY",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateY",
"summary": "The translateY() CSS function repositions an element vertically on the 2D plane. Its result is a data type.",
"support": {
"chrome": {
"version_added": "1"
},
"chrome_android": "mirror",
"edge": {
"version_added": "12"
},
"firefox": {
"version_added": "3.5"
},
"firefox_android": "mirror",
"ie": {
"version_added": "9"
},
"oculus": "mirror",
"opera": {
"version_added": "10.5"
},
"opera_android": {
"version_added": "11"
},
"safari": {
"version_added": "3.1"
},
"safari_ios": {
"version_added": "3.2"
},
"samsunginternet_android": "mirror",
"webview_android": {
"version_added": "2"
},
"edge_blink": {
"version_added": "79"
}
},
"title": "translateY()"
}
],
"transform-functions": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "css/types/transform-function.json",
"name": "transform-function",
"slug": "CSS/transform-function",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function",
"summary": "The CSS data type represents a transformation that affects an element's appearance. Transformation functions can rotate, resize, distort, or move an element in 2D or 3D space. It is used in the transform property.",
"support": {
"chrome": {
"version_added": "1"
},
"chrome_android": "mirror",
"edge": {
"version_added": "12"
},
"firefox": {
"version_added": "3.5"
},
"firefox_android": "mirror",
"ie": {
"version_added": "9",
"notes": "Internet Explorer 9 supports 2D but not 3D transforms. In version 9, mixing 2D and 3D transform functions invalidates the entire property."
},
"oculus": "mirror",
"opera": {
"version_added": "10.5"
},
"opera_android": {
"version_added": "11"
},
"safari": {
"version_added": "3.1"
},
"safari_ios": {
"version_added": "3.2"
},
"samsunginternet_android": "mirror",
"webview_android": {
"version_added": "2"
},
"edge_blink": {
"version_added": "79"
}
},
"title": ""
}
],
"svg-transform": [
{
"engines": [],
"filename": "svg/attributes/presentation.json",
"name": "transform",
"slug": "SVG/Attribute/transform",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform",
"summary": "The transform attribute defines a list of transform definitions that are applied to an element and the element's children.",
"support": {
"chrome": {
"version_added": null
},
"chrome_android": "mirror",
"edge": "mirror",
"firefox": {
"version_added": null
},
"firefox_android": "mirror",
"ie": {
"version_added": null
},
"oculus": "mirror",
"opera": "mirror",
"opera_android": "mirror",
"safari": {
"version_added": null
},
"safari_ios": "mirror",
"samsunginternet_android": "mirror",
"webview_android": "mirror",
"edge_blink": {
"version_added": null
}
},
"title": "transform"
}
],
"typedef-transform-list": [
{
"engines": [
"blink",
"gecko",
"webkit"
],
"filename": "svg/elements/linearGradient.json",
"name": "gradientTransform",
"slug": "SVG/Attribute/gradientTransform",
"mdn_url": "https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/gradientTransform",
"summary": "The gradientTransform attribute contains the definition of an optional additional transformation from the gradient coordinate system onto the target coordinate system (i.e., userSpaceOnUse or objectBoundingBox). This allows for things such as skewing the gradient. This additional transformation matrix is post-multiplied to (i.e., inserted to the right of) any previously defined transformations, including the implicit transformation necessary to convert from object bounding box units to user space.",
"support": {
"chrome": {
"version_added": "1"
},
"chrome_android": "mirror",
"edge": "mirror",
"firefox": {
"version_added": "1.5"
},
"firefox_android": "mirror",
"ie": {
"version_added": null
},
"oculus": "mirror",
"opera": "mirror",
"opera_android": "mirror",
"safari": {
"version_added": "3"
},
"safari_ios": "mirror",
"samsunginternet_android": "mirror",
"webview_android": "mirror",
"edge_blink": {
"version_added": "79"
}
},
"title": "gradientTransform"
}
]
}