2016-05-31 15 views
18

ここReact-Nativeでこの変換を行うには?

enter image description here

...私はstyle.transform属性 を使用しようが、私は変換することはできませんので、多くのドキュメントが存在しない、泣いては、CSS3のコードです:

トランスフォーム:translateZ(-100px)translateX(-24%)translateY(0) rotateY(60deg);ここで

+2

正しいと答えをマークしてください! – Cherniv

+0

私はそれを自分の持っている、参照してくださいhttps://snack.expo.io/HJYvJKI3l –

答えて

45

かなり近い結果である:

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

+0

ああ私の神!あなたは私の命を救うことができます!どうもありがとうございます !私はそれをアニメーションにします –

+1

私はそれを作った! https://rnplay.org/apps/pBrrUg –

+0

@ alucard.g rpplayは利用できなくなりました。これに代わるものはありますか? –

関連する問題