Skip to content

Commit

Permalink
Add CSS 2D/3D transform features (#566)
Browse files Browse the repository at this point in the history
* Add CSS 2D/3D transform features

Because transforms exist in multiple other parts of the platform
(DOMMatrix, canvas, SVG) prefix the names with "CSS".

* Update transforms2d.yml

* Update transforms3d.yml
  • Loading branch information
foolip committed Mar 21, 2024
1 parent c4933cc commit d5bdf84
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 0 deletions.
20 changes: 20 additions & 0 deletions feature-group-definitions/transforms2d.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
name: 2D transforms
description: The `transform` CSS property and its 2D transform functions allow rotating, scaling, skewing, and translating an element. Arbitrary 2D transforms are also possible using a transformation matrix.
caniuse: transforms2d
spec: https://drafts.csswg.org/css-transforms-1/
compat_features:
- css.properties.transform
- css.properties.transform-box
- css.properties.transform-origin
- css.types.transform-function
- css.types.transform-function.matrix
- css.types.transform-function.rotate
- css.types.transform-function.scale
- css.types.transform-function.scaleX
- css.types.transform-function.scaleY
- css.types.transform-function.skew
- css.types.transform-function.skewX
- css.types.transform-function.skewY
- css.types.transform-function.translate
- css.types.transform-function.translateX
- css.types.transform-function.translateY
27 changes: 27 additions & 0 deletions feature-group-definitions/transforms3d.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
name: 3D transforms
description: The `transform` CSS property and its 3D transform functions allow rotations and other transforms in three dimensions, including perspective transforms.
caniuse: transforms3d
spec: https://drafts.csswg.org/css-transforms-2/
compat_features:
- css.properties.backface-visibility
- css.properties.perspective-origin
- css.properties.perspective-origin.bottom
- css.properties.perspective-origin.center
- css.properties.perspective-origin.left
- css.properties.perspective-origin.right
- css.properties.perspective-origin.top
- css.properties.perspective
- css.properties.perspective.none
- css.properties.transform-style
- css.properties.transform.3d
# https://drafts.csswg.org/css-transforms-2/#three-d-transform-functions
- css.types.transform-function.matrix3d
- css.types.transform-function.translate3d
- css.types.transform-function.translateZ
- css.types.transform-function.scale3d
- css.types.transform-function.scaleZ
- css.types.transform-function.rotate3d
- css.types.transform-function.rotateX
- css.types.transform-function.rotateY
- css.types.transform-function.rotateZ
- css.types.transform-function.perspective

0 comments on commit d5bdf84

Please sign in to comment.