web-dev-qa-db-fra.com

Comment transformer cette transformation avec React-Native?

j'essaie d'utiliser l'attribut style.transform mais je ne peux pas transformer, il n'y a pas beaucoup de doc, des pleurs ...

enter image description here

voici le code css3:

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

38
alucard.g

Voici un résultat assez proche:

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'},

    ],
  }
});

Voir l'exemple complet: https://rnplay.org/apps/Qg7Bhg

98
Jean Regisser