只须把margin-left改为margin-top即可
<style>
body{margin:0;overflow-x: hidden; }
.flex{height:100%;display:flex;flex-direction:column;justify-content:center}
span{height:100;width:100;margin-left:100%;transition:1.2s;}
</style>
<div class=flex>
<span>hello,world!</span>
</div>
<script src=jq.js></script>
<script>
$(window).ready(function(){
width=$(this).width()/2
$('span').css({'transform':'translateX(-'+width+'px)'})
})
</script>