- From: Rami Yushuvaev via GitHub <sysbot+gh@w3.org>
- Date: Mon, 06 Feb 2023 18:26:00 +0000
- To: public-css-archive@w3.org
> @ramiy, looks like you forgot that when specifying a corner the first on starts at the top-left. Your `bendX(180deg)` also includes a rotation! > > It is critical to comprehend that bending can be useful to take a progress element and make it animate clockwise like how a clocks arms move. The top-left corner does not move since the bend filter (when positive) effects the other corners! I think that the starting point should be controlled by `transform-origin`. And the direction should be controlled by the `bend()` function value: - positive values = clockwise - negative values = counter clockwise > Additionally introducing bend (as desirable as it is) would create potential complications with `height`, `width` and related properties. I think having `width` set may end up down-sizing the element or visually "down-scaling" in a sense. When you set `width` and `height` and then use `transform` values like `translate()`, `scale()` or `skew()` (or their respective single properties), does it create potential complications? I don't think so. For example, scaling an elements (`transform: scale(2);`) does not change the original width and height although the element double its original size. I think the same logic should be applied on `bend()`. Besides, browser can leverage GPU to accelerated CSS transitions [[1]](https://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css) [[2]](https://www.urbaninsight.com/article/improving-html5-app-performance-gpu-accelerated-css-transitions). > Using CSS bend filter would make it much easier to create an animated pie chart out of a progress element to animate how much disk space a client is using. Additionally I could position multiple progress elements over each other to better visualize relative disk usage. Yes, charts is an amazing use case for frameworks like [Charts.CSS](https://chartscss.org/). This was my initial use case (I'm the creator of Charts.CSS). But, 3D bend has much bigger potential beyond simple charts. > The illustration has the top-left 1 point in the wrong position in almost every instance. Because of that it's difficult to visually determine what a proper `bendY()` would be however `bendZ()` makes sense conceptually (not really sure about the Z illustrations hoever). You are correct. I see the wrong position. But you get the point. You understand what transform capability I want to add to CSS transforms. > Actually, I think `filter: bendY(180deg)` should render like the following: The property is not `filter`, it's a `transform`. -- GitHub Notification of comment by ramiy Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6293#issuecomment-1419554208 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 6 February 2023 18:26:02 UTC