如何使用React-Native进行此转换?

时间:2016-05-31 06:26:28

标签: react-native transform

我尝试使用style.transform属性 但我无法改变,没有那么多医生,哭泣......

enter image description here

这是css3代码:

  

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

1 个答案:

答案 0 :(得分:93)

这是一个非常接近的结果:

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

    ],
  }
});

参见完整示例:https://rnplay.org/apps/Qg7Bhg