[css-transforms-2] proposal: new "transform: bend();" function #6293
Description
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