CSS3关于persepctive透视和transform3d移动的问题

问题遇到的现象和发生背景

img

问题相关代码，请勿粘贴截图
<style>
    body {
        perspective: 400px;
    }       
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 100px auto;
        transform: translateZ(100px);
    }
</style><body>
<section>
    <div></div>
</section></body>
运行结果及报错内容
我的解答思路和尝试过的方法

我把perspective放在父盒子section中就可以

我想要达到的结果

放在body中为什么没有放大效果呢

谷歌浏览器中测试放在body中可以放大

ie中不行,可能是ie的bug