-
Notifications
You must be signed in to change notification settings - Fork 24.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Transforms] transform-origin support #1964
Comments
Reading from here: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
It seems you can still do it by just translating, then applying the transforms u want, and translating again. Does that solve? @cleercode Would love to know the usecase and some example. |
@cleercode @chirag04 I'm working on implementing this right now. Use case was something I wanted to rotate as if it the axis was the left, instead of the middle. Implementing transform-origin in terms of pixels is super easy, but I'm trying to follow the spec for allowing percent and keywords such as Anyone have any guidance on how to accomplish the ability to use percentage values? It would need to require knowledge of the width/height of the element, which I don't think we have at this stage, right? |
Nice. It would be interesting to have transform-origin. For now i would worry about having just numbers for it. percent in general is not supported anywhere in react-native. Not sure why. We can implement percent as the next step i guess if required. |
I'll submit the PR for just the numbers, then we can talk about how to implement the rest of the spec with percents & keywords. I imagine percent isn't implemented in RN because for the most part, flexbox prevents the need for it. This is an exception where the transform property is implemented outside of flexbox, but still might require some knowledge of the element's size... |
@chirag04 so there's a bit of a problem... The way I've implemented this, I've basically set it up so that the user can specify x, y, z offsets from the "default origin", which is the middle of the element. It looks like the w3c spec has the default set to the middle of the element, but the default is The way I have it working, if the user specifies I'm happy to submit what I have, but this might present a problem as far as deviating from the expected behavior of an existing CSS property (as opposed to just not supporting it). What do you think? @vjeux , perhaps you have some thoughts? |
We should definitely match the web behavior where possible.
|
@sahrens agreed. does anyone have any thoughts on how to extract the width/height of the element in order to make this possible? From what I can tell, supporting transform-origin in this way is not going to be easily possible without completely changing the location of these calculations to somewhere where we have this information handy. It's kind of a bummer, because implementing this as from the point of view of the center of the element, rather than the bottom left, is really simple. |
@lelandrichardson Not sure if |
@chirag04 Without moving a ton of code, this is all basically taking place in |
Hi there! This issue is being closed because it has been inactive for a while. But don't worry, it will live on with ProductPains! Check out it's new home: https://productpains.com/post/react-native/transforms-transform-origin-support |
Is there any way to emulate this? In my case I can't rotate icon properly without this property. |
@alexHlebnikov transform origin is implemented as a matrix transformation by a translation matrix to the resulting transform matrix. You can implement this currently by setting the I talked to @vjeux about this PR some time ago and he seemed to agree that we could merge it in despite the difference from the web spec. If I get some time, I may try to revive the PR... |
Is this to be merged? I really needed it and using the matrix is not a nice solution. Thanks! |
+1 |
1 similar comment
+1 |
+1 what's the status of this? |
+1 |
5 similar comments
+1 |
+1 |
+1 |
+1 |
+1 |
+1 Come on, we need this badly!! |
+1 |
2 similar comments
+1 |
+1 |
|
+1 |
8 similar comments
+1 |
+1 |
+1 |
+1 |
+1 |
+1 |
+1 |
+1 |
transformMatrix is listed as Deprecated! What now? |
@trsh as i can see in source of RN there is still transformMatrix. You can use it like this: |
@sfatih yes, but using Deprecated features for a new project is not smart by nature. They can drop it in every next version. |
@sahrens why would anybody mention something so obvious (that I can use transform and roll my own transform-origin logic)? All this topic is about, that we want "transform-origin" to be a in-the-box feature for react-native. Because it's a struggle to calculate those deltas and scale for example by left top corner. Matrix kind of was a small relief. |
+1 |
@trsh How did you solve? what matrix did you apply? |
@filipef101 . No, I won't add deprecated features for a new project. I calculated it manually - I do scale, and then compensate (-translateX, -translateY) deltas from left and top. I will not share my code, as it's dumb and doesn't work very well. I suggest to take 3rd party math lib with matrix's calculate it your self, and then supply values for the transform. If you don't have fixed dimensions you will also need |
@trsh thanks! I actually solved with some trippy views and rotation, I actually applied the rotation using 3d matrix but it was the same not based on corner |
+1 |
2 similar comments
+1 |
+1 |
+1 |
Do Views have an equivalent of the CSS property
transform-origin
?The text was updated successfully, but these errors were encountered: