[css-transforms] New Transform operations: Warp and Twist
Open
Nobody has claimed this yet.
css-transforms-2
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
Description
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: 'clamp' and 'no-clamp'. This would describe whether the curve should go past the corner points. For example, 'no-clamp' would allow an edge to be 'blown out' such that it creates a mushroom-like silhouette. Whereas 'clamp' 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% 'clamp', top 25% 'no-clamp'); 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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No repository file, test, or implementation entry point is named. Start by reviewing the CSS transform specifications and the open discussion to determine whether warp and twist have an agreed syntax and behavior; the work is done only when the specification scope and proposal are resolved.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100