css-transforms.json

{
  "spec": {
    "title": "CSS Transforms Module Level 1",
    "url": "https://www.w3.org/TR/css-transforms-1/"
  },
  "properties": {
    "transform": {
      "name": "transform",
      "value": "none | <transform-list>",
      "initial": "none",
      "appliesTo": "transformable elements",
      "inherited": "no",
      "percentages": "refer to the size of reference box",
      "computedValue": "as specified, but with lengths made absolute",
      "canonicalOrder": "per grammar",
      "animationType": "transform list, see interpolation rules",
      "styleDeclaration": [
        "transform"
      ]
    },
    "transform-origin": {
      "name": "transform-origin",
      "value": "[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] <length>? | [[ center | left | right ] && [ center | top | bottom ]] <length>?",
      "initial": "50% 50%",
      "appliesTo": "transformable elements",
      "inherited": "no",
      "percentages": "refer to the size of reference box",
      "computedValue": "see background-position",
      "canonicalOrder": "per grammar",
      "animationType": "by computed value",
      "styleDeclaration": [
        "transform-origin",
        "transformOrigin"
      ]
    },
    "transform-box": {
      "name": "transform-box",
      "value": "content-box | border-box | fill-box | stroke-box | view-box",
      "initial": "view-box",
      "appliesTo": "transformable elements",
      "inherited": "no",
      "percentages": "N/A",
      "computedValue": "specified keyword",
      "canonicalOrder": "per grammar",
      "animationType": "discrete",
      "styleDeclaration": [
        "transform-box",
        "transformBox"
      ]
    }
  },
  "descriptors": {},
  "valuespaces": {
    "<transform-list>": {
      "value": "<transform-function>+"
    },
    "<matrix()>": {
      "value": "matrix( <number> [, <number> ]{5,5} )"
    },
    "<translate()>": {
      "value": "translate( <length-percentage> [, <length-percentage> ]? )"
    },
    "<translateX()>": {
      "value": "translateX( <length-percentage> )"
    },
    "<translateY()>": {
      "value": "translateY( <length-percentage> )"
    },
    "<scale()>": {
      "value": "scale( <number> [, <number> ]? )"
    },
    "<scaleX()>": {
      "value": "scaleX( <number> )"
    },
    "<scaleY()>": {
      "value": "scaleY( <number> )"
    },
    "<rotate()>": {
      "value": "rotate( [ <angle> | <zero> ] )"
    },
    "<skew()>": {
      "value": "skew( [ <angle> | <zero> ] [, [ <angle> | <zero> ] ]? )"
    },
    "<skewX()>": {
      "value": "skewX( [ <angle> | <zero> ] )"
    },
    "<skewY()>": {
      "value": "skewY( [ <angle> | <zero> ] )"
    }
  }
}