[csswg-drafts] [css-transforms-2] proposal: new "transform: bend();" function (#6293)

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

== [css-transforms-2] proposal: new "transform: bend();" function ==
The `transform` property has [several functions](https://drafts.csswg.org/css-transforms-2/#three-d-transform-functions) that allow elements to be transformed in two-dimensional or three-dimensional space.

This proposal aims to add a new native CSS function that let you bend elements, using the following syntax:

```
.element {
  transform: bend();
}
```

Formal syntax:

```
bendX( [ <angle> | <zero> ] )
bendY( [ <angle> | <zero> ] )
bendZ( [ <angle> | <zero> ] )
```

This concept is 2D/3D transformations by stretching & shrinking the element from its four corners. The 3D transform (or `bendZ()`) will bend the element to a cylinder - the two top corners and the two bottom corners will be bent back to create a cylinder.

![transform_ bend](https://user-images.githubusercontent.com/576623/118338701-7535b600-b51f-11eb-865a-38fb90b57ffa.png)

Example: https://codepen.io/team/amcharts/pen/gZOLGM?editors=0010

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


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

Received on Friday, 14 May 2021 23:00:58 UTC