How to make this transform with React-Native?

懵懂的女人 提交于 2019-12-18 10:07:17

问题


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

here is the css3 code:

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


回答1:


Here is a pretty close result:

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



来源:https://stackoverflow.com/questions/37538303/how-to-make-this-transform-with-react-native

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!