W3C home > Mailing lists > Public > public-css-archive@w3.org > March 2020

[csswg-drafts] [css-transforms] New Transform operations: Warp and Twist (#4845)

From: Karric via GitHub <sysbot+gh@w3.org>
Date: Sat, 07 Mar 2020 17:20:33 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-577372029-1583601632-sysbot+gh@w3.org>
Karric has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-transforms] New Transform operations: Warp and Twist ==
Not sure if I'm following this process correctly, it's not well described.

This issue is to discuss adding two new types of transforms to the transform specs: warp and twist.

WARP:
• Often, it may be desirable to 'bend' an element's shape or specific edge to produce the appearance of being a curve. This is not always possible with border-radius or clip-path to produce, and cannot be replicated with other transforms.
• This would function similar to the skew transform, but with three additional parameters:
   • The edge(s) to transform, just like border-*-radius. Unspecified would assume all edges.
   • A percentage representing how much of a circle's circumference is used as the shape of the curve; negative number flips the concave/convex quality.
   • A string with two possible values: 'wrap' and 'no-wrap'. This would describe whether the curve should go past the corner points. For example, 'wrap' would allow an edge to be 'blown out' such that it creates a mushroom-like silhouette. Whereas 'no-wrap' would prevent this, only allowing it to become at most a half-circle.
   • The parameters above could be repeated in sets to describe a complex curve to warp along.
   • Transform-origin would be ignored.
• Example syntax: transform: warp(left 50% 'wrap', top 25% 'no-wrap'); produces a half-circle curve on the left, and quarter-circle curve along the top.

TWIST:
• Works with transform-origin to set the origin of the twisting axis.
• Arguments would be:
   • A rotation.
   • A length/distance out where the twisting effect is 0. Assume a linear falloff to this point.
   • A string representing the clipping options: 'clip' or 'no-clip'. Dictates whether pixels pushed out of the element's original perimeter should be hidden or not; 'no-clip' by default.
   • Parameters above could be repeated in sets to describe a stack of twists, evaluated like linear-gradient stops.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4845 using your GitHub account
Received on Saturday, 7 March 2020 17:20:35 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:02 UTC