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

The transform property has several 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 transformations by stretching & shrinking the element from its four corners. The 2D transform (bendX() & bendY()) will bend the element on the same plane. 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.

The illustration covers positive and negative values. It covers X, Y and Z plane.

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

Start by reading the CSS Transforms 2 three-dimensional transform functions section and the linked CodePen example, then compare the proposed bendX(), bendY(), and bendZ() syntax with existing transform functions. Done would require a resolved CSSWG proposal or specification for the 2D and cylindrical 3D behavior; this issue names no implementation files or tests.