1. ホーム
  2. react-native

[解決済み] React-Nativeでこのトランスフォームを作るには?

2022-02-12 17:46:45

質問

style.transform属性を使おうとしています。 しかし、私は変換を行うことができません、そんなに多くのドキュメントがありません、泣い...

以下は、CSS3のコードです。

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

どのように解決するのですか?

ここにかなり近い結果があります。

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