62

i try to use style.transform attribute but i can't make the transform, there is not so many doc , crying ...

enter image description here

here is the css3 code:

transform: translateZ(-100px) translateX(-24%) translateY(0) rotateY(60deg);

1

1 Answer 1

141

Here is a pretty close result:

enter image description here

render() {
  return (
    <View style={styles.container}>
      <View style={styles.child} />
    </View>
  )
},

var styles = StyleSheet.create({
  container: {
      backgroundColor:'green',
      flex: 1,
  },
  child: {
    flex: 1,
    backgroundColor: 'blue',
    transform: [
      { perspective: 850 },
      { translateX: - Dimensions.get('window').width * 0.24 },
      { rotateY: '60deg'},

    ],
  }
});

See full example: https://rnplay.org/apps/Qg7Bhg

2
  • @alucard.g rpplay is no longer available, can you provide alternate to this? Apr 13, 2017 at 7:40
  • Hi, I applied the transform to the Image. How to save the transformed image without using the third-party modules in React-native
    – Ajay
    Dec 13, 2019 at 7:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.