Hello,
I add transform: scaleX(-1) in style of an icon for mirroring icon shape in perspective, but it doesn’t work when I put object in Coordinate Container. It work in other container like flex.
Is it bug? Or is there any other solution for mirror shape?
CSS3 transforms are used for rotation, which are currently implemented for coordinate containers. Your transform is being overridden by rotation. You can see this by deleting the rotation property in the Component’s position prop. You’ll see in the designer that your transform is taking effect. Unfortunately this is only a temporary solution, as the default rotation gets recreated the next time this view is opened.
Ideally, we would introduce mirroring as a feature (#14576), as using arbitrary CSS transforms haven’t been validated/tested and could result in indeterminant behavior in the Designer (particularly with grab handles and drag and drop) and with user interaction Components (the Slider Component took a ton of work to make work with Component rotation, there are plenty of Components which didn’t receive such fixes).
A possible stop gap fix we could do, is for us to simply append any user defined transform to the CSS rotation. This would not obviate possible problems with drag handles/component interactions, but it would make it possible. This solution would require additional consideration before we commit to it.
Thank you for bringing this to our attention. I have logged a bug pertaining to style.transform being blown away for children of a coordinate container (BUG-15516), and there is an existing feature request pertaining to component mirroring (FEATURE-14576).
Thanks. you are right. Before introducing the new rotation, I can simply use any CSS3 transform I like.
As you know the animations are really limited in perspective and the only way to do animations is CSS3 transform and transition CSS3. adding transform to rotation is good idea until this get fix.
I believe its simple to develop for IA, so when do you think we have this?
I understand that this is a frustrating, but easily solvable bug. We’ve prioritized it, but we have a number of higher priority issues ahead of it as we head into the holiday season. I’ll see what I can do to get it done, but I can’t commit to a time frame. In the mean time I would suggest this work around: use another container, say flex, to “wrap” the icon. It’s not ideal, but it should allow you to use your transform.
coordinate -> flex -> icon
Hello Perkins
If the final parent container is coordinate your solution doesn’t work.
Coordinate->flex-> object
Also I need all transform command work with rotation. If rotation over write all my css3 transform adding only mirror doesn’t work for me.
There are many effect that I can simply create by adding transform to object.
So please make some how rotation doesn’t overwrite other css3 transform command instead of making only mirroring feature.
Thanks…
view.json (1021 Bytes)
Try this: coordinate root → rotated flex container → icon with scaleX(-1) transform
I see a visual bug in the designer with the selection outline when the icon is selected
but it does have both rotation and mirroring transform and looks fine in browser
