Menu
how do I apply the transform-origin property to a style in react native? I've tried in several ways, but I did not get an event
I tried:
transform: [{ rotate: ('90deg')},{origin: {x: 'top', y:'center'}} ] 
827
The transform origin is the point around which a transformation is applied. For example, the transform origin of the rotate() function is the center of rotation.
add in style transform: [{ rotate: '14deg' }], if you make view position absolute it will not affect another view! the rotate start from 0 to 360 deg .
The transform-origin property allows you to change the position of transformed elements. 2D transformations can change the x- and y-axis of an element. 3D transformations can also change the z-axis of an element. To better understand the transform-origin property, view a demo.
React native doesn't have any transform origin property yet. maybe in the future
but with a trick we can achieve this 🐈🐈🐈🐈
you should try to use translateX or translateY trick.
the trick is to first move the center of the shape to the origin that you want to rotate.
for example I have a shape with these properties
width: 60 height: 60 to rotate it from top left origin I should do these
translateX: -30 translateY: -30 rotate: 45deg translateX: 30 translateY: 30 be careful after rotation is done you should translate it back to it's orginal position
Note: to put the center of a shape to it's left side you can move it by half of it's width
in this example I want to rotate a shape 35 deg from left most origin
transform: [ { translateX: -1 * (widthOfShape / 2) } }, { rotate: '35deg' }, { translateX: (widthOfShape / 2) }, ] If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
