[csswg-drafts] Request for New CSS Property: 'mask-rotation' (#10024)

Thiago2104 has just created a new issue for https://github.com/w3c/csswg-drafts:

== Request for New CSS Property: 'mask-rotation' ==
### Summary:
I am proposing the addition of a new CSS property, mask-rotation, to provide developers with more control over the orientation and rotation of CSS masks.

### Motivation:
Currently, CSS offers properties like `mask-size`, `mask-origin`, and `mask-position` for controlling the size, origin, and position of masks. However, there is no direct property to manage the rotation or orientation of the mask. This feature would be particularly useful for scenarios where precise control over the mask's rotation is required.

### Proposed Solution:
Introduce a new property, mask-rotation, that allows developers to specify the rotation angle for CSS masks. The property value could accept degrees (deg) as a unit, similar to how rotate works in transformations.

### Example:
```css
.element {
    mask-image: url('mask.png');
    mask-size: cover;
    mask-origin: center;
    mask-rotation: 45deg; /* Rotates mask-image 45 degrees clock-wise */
}
```
### Key Words:
The new property could have key words to specify the type of rotation and the axis where it is rotating:

- `right`: Rotate the mask 90 degrees
- `flip`: Rotate the mask 180 degrees
- `left`: Rotate the mask 270 degrees

Also, adding the axis to the key words specify the axis where it is rotating:

- 'x' (default): Rotates in clock-wise direction
- 'y': Rotates mask horizontally
- 'z': Rotates mask vertically

### Example:
```css
.element {
    mask-image: url('mask.png');
    mask-size: cover;
    mask-origin: center;
    mask-rotation: y right, flip; /* Rotates mask-image horizontally 90 degrees, and rotates mask 180 degrees clock-wise */
}
```
### Benefits:

- Enhances flexibility in designing complex visual elements.
- Provides a more comprehensive set of tools for controlling mask behavior.
- Enables masks complex animations.
- Aligns with existing CSS properties, making it intuitive for developers.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10024 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 3 March 2024 18:56:38 UTC